首页 >> 8idea教程 >> 网页设计 >> 阿里妈妈下拉分类效果
阿里妈妈下拉分类效果

来源：互联网作者：未知发布日期：2008-11-13 浏览次数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>阿里妈妈下拉分类效果</title> 
<style type="text/css"> 
* {  
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none  
}  
BODY {  
    FONT-SIZE: 12px; COLOR: #555555; FONT-FAMILY: Arial  
}  
.search_div {  
    FLOAT: left; MARGIN: 15px 2px 0px 10px; POSITION: relative  
}  
.search_div SPAN {  
    DISPLAY: block; FLOAT: left; HEIGHT: 22px  
}  
.search_div SPAN {  
    BACKGROUND-IMAGE: url(http://img.alimama.cn/images/bg/new_head2.gif); BACKGROUND-REPEAT: no-repeat  
}  
.search_div .left {  
    BACKGROUND-POSITION: left -400px; WIDTH: 13px  
}  
.search_div .search_select {  
    BACKGROUND-POSITION: left -430px; OVERFLOW: hidden; WIDTH: 100px; COLOR: #999999; PADDING-TOP: 6px; BACKGROUND-REPEAT: repeat-x; WHITE-SPACE: nowrap; HEIGHT: 22px; TEXT-ALIGN: left  
}  
.search_div .dot_right {  
    BACKGROUND-POSITION: right -460px; WIDTH: 30px  
}  
.search_div .right {  
    BACKGROUND-POSITION: right -400px; WIDTH: 13px  
}  
#search_select_list .select_body {  
    BACKGROUND-IMAGE: url(http://img.alimama.cn/images/bg/new_head2.gif); BACKGROUND-REPEAT: no-repeat  
}  
#search_select_list .select_left {  
    BACKGROUND-IMAGE: url(http://img.alimama.cn/images/bg/new_head2.gif); BACKGROUND-REPEAT: no-repeat  
}  
#search_select_list .select_right {  
    BACKGROUND-IMAGE: url(http://img.alimama.cn/images/bg/new_head2.gif); BACKGROUND-REPEAT: no-repeat  
}  
#search_select_list LI A {  
    BACKGROUND-IMAGE: url(http://img.alimama.cn/images/bg/new_head2.gif); BACKGROUND-REPEAT: no-repeat  
}  
#search_select_list {  
    DISPLAY: none; Z-INDEX: 9999; LEFT: 0px; WIDTH: 400px; POSITION: absolute; TOP: 23px; HEIGHT: 134px  
}  
#search_select_list .select_left {  
    BACKGROUND-POSITION: left -520px; DISPLAY: block; FLOAT: left; WIDTH: 8px; HEIGHT: 134px  
}  
#search_select_list .select_right {  
    BACKGROUND-POSITION: right -520px; DISPLAY: block; FLOAT: left; WIDTH: 8px; HEIGHT: 134px  
}  
#search_select_list .select_body {  
    BACKGROUND-POSITION: left -660px; FLOAT: left; WIDTH: 310px; MARGIN-RIGHT: -3px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 134px  
}  
#search_select_list UL {  
    MARGIN: 6px 0px  
}  
#search_select_list LI {  
    BORDER-RIGHT: #d0cebe 1px dotted; FLOAT: left; MARGIN: 0px 2px; WIDTH: 72px  
}  
#search_select_list LI A {  
    BACKGROUND-POSITION: 7px -823px; DISPLAY: block; PADDING-LEFT: 12px; MARGIN: 1px 5px 1px 0px; COLOR: #666666; LINE-HEIGHT: 18px; TEXT-ALIGN: left  
}  
#search_select_list LI A:hover {  
    BACKGROUND-POSITION: left -800px; COLOR: #000; TEXT-DECORATION: none  
}  
#search_select_list LI A.border {  
    FONT-WEIGHT: bolder  
}  
.select_body {  
    BACKGROUND-IMAGE: url(http://img.alimama.cn/images/bg/new_head2.gif); BACKGROUND-REPEAT: no-repeat  
}  
.select_body {  
    BACKGROUND-POSITION: left -660px; FLOAT: left; WIDTH: 310px; MARGIN-RIGHT: -3px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 134px  
}  
</style> 
<script type="text/javascript" src="http://static.alimama.com/js/generic.js"></script> 
<script type="text/javascript" src="http://static.alimama.com/jsc/jsc.js"></script> 
</head> 
<body> 
<DIV class="search_div" onMouseOver="select_move(this,'block')" onmouseout="select_move(this,'none')"> 
<SPAN class="left"></SPAN> 
<SPAN class="search_select" id="search_select" val="0">所有类目</SPAN> 
<SPAN class="dot_right"></SPAN>   
<DIV id="search_select_list"><SPAN class="select_left"></SPAN> 
<DIV class="select_body"> 
<UL> 
    <LI><A href="http://www.alimama.com/#" val="302">站长之家</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="312">影音娱乐</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="311">门户网站</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="306">生活资讯</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="319">企业服务</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="307">动漫游戏</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="309">汽车</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="315">医疗健康</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="303">投资理财</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="304">教育培训</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="301">潮流时尚</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="314">个性生活</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="308">旅游户外</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="318">网上商城</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="317">人文艺术</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="320">个人博客</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="310">运动体育</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="321">免费空间</A> </LI> 
    <LI><A href="http://www.alimama.com/#" val="313">爱好收藏</A> </LI> 
    <LI><A class=border href="http://www.alimama.com/#" val="0">所有类目</A></LI> 
    <LI><A href="http://www.alimama.com/#" val="305">数码硬件</A> </LI> 
</UL> 
</DIV> 
<SPAN class="select_right"></SPAN> 
</DIV> 
</DIV> 
</body> 
</html>
关键词：阿里妈妈下拉分类效果
上一篇：基于display:table的CSS布局
下一篇：网页设计之css+div PK table+css