分享几种CSS制作菜单列表的方法

html-css07

分享几种CSS制作菜单列表的方法,第1张

<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6     <style> 7         ul{ 8             list-style: none 9         }10         .nav>li{11             float: left12         }13         ul a{14             display: block15             text-decoration: none16             width: 100px17             height: 50px18             text-align: center19             line-height: 50px20             color: white21             background-color: #2f3e4522         }23         .nav>li:first-child a{24             border-radius: 10px 0 0 10px25         }26         .nav>li:last-child a{27             border-radius: 0 10px 10px 028         }29         .drop-down{30             /*position: relative*/31         }32         .drop-down-content{33             padding: 034             display: none35             /*position: absolute*/36         }37         38         h3{39             font-size: 30px40             clear: both41         }42         .drop-down-content li:hover a{43             background-color:red44         }45         .nav .drop-down:hover .drop-down-content{46             display: block47         }48 </style>49 </head>50 <body>51     <ul class="nav">52         <li><a href="#">下拉菜单</a></li>53         <li class="drop-down"><a href="#">下拉菜单</a>54             <ul class="drop-down-content">55                 <li><a href="#">我是1</a></li>56                 <li><a href="#">我是2</a></li>57                 <li><a href="#">我是3</a></li>58             </ul>59             </li>60         <li><a href="#">下拉菜单</a></li>61         <li><a href="#">下拉菜单</a></li>62         <li><a href="#">下拉菜单</a></li>63     </ul>64     <h3>我是测试文字</h3>65 </body>66 </html>

这个是我写的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=GB2312" />

<meta name="robots" content="all" />

<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>

<style type="text/css">

*{margin:0padding:0}

body {

background: #fff

font-family: "Lucida Grande", Helvetica, Arial, sans-serif

font-size: 12px

}

/* 定义样式的宽度和其他样式 */

.menu {font-size:12pxpadding-bottom:5pxwidth:750pxmargin:0 auto}

/* 清楚默认的padding和margin以及list的样式 */

.menu ul {padding:0margin:0list-style-type:noneheight:3embackground:transparent}

.menu ul ul{width:7em}

/* 定义float属性使得你可以定义下一级菜单的位置 */

.menu ul li {float:leftheight:3emline-height:3emdisplay:block}

/* 二级菜单样式 */

.menu ul ul li {display:blockwidth:7emheight:autoline-height:1em}

/* 一级菜单的默认样式 */

.menu a, .menu a:visited {display:blockfloat:leftheight:100%width:7emfont-size:1emtext-

decoration:nonecolor:#fffbackground:#949e7cpadding:0 1emborder-left:1px solid #eeeborder-right:1px solid #000}

/* hack IE5.x 定义以及菜单的宽度，这样可以使得获取或者设置当前宽度 */

* html .menu a, * html .menu a:visited { width:7emtext-decoration:none}

/* 下一级的链接默认外观样式 */

.menu ul ul a, .menu ul ul a:visited

{display:blockbackground:#5b8686

color:#fffwidth:7emheight:100%line-height:1empadding:0.5em 1emborder-bottom:1px solid #7aa}

/*定义下级菜单的宽度*/

* html .menu ul ul a, * html .menu ul ul a:visited {width:7em}

/* 定义IE6下table而做的样式 */

.menu table {border-collapse:collapsepadding:0margin:-1pxwidth:0height:0font-size:1emz-index:1}

/* 二级菜单的背景 */

/* 一级链接样式 */

* html .menu a:hover {color:#0066FFposition:relativez-index:100}

/**/

.menu li:hover {position:relative}

/**/

.menu :hover a {color:#ff0background:#d4d8bd}

/* 二级链接样式 */

* html .menu ul ul a:hover{color:#FF0000background:#7aaposition:relativez-index:110}

/*定位二级菜单的位置，设为相关的就是在一级菜单的下方显示，如果是absolute的话大家可以试试*/

.menu ul ul li:hover {position:relative}

.menu ul ul :hover a {color:#fffbackground:#7aa}

.menu ul ul {visibility:hiddenposition:absoluteheight:0top:3emleft:0width:8em}

/* 使得移动到一级定义是否显示下一级菜单，如果把 visibility:visible改成visibility:hidden则就隐藏了二级以上的菜单*/

.menu ul :hover ul{visibility:visibleheight:autopadding:0 3em 3em 3emleft:-3em}

</style>

</head>

<body>

<div class="menu">

<ul>

<li><a href="#">酒店主页<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="酒店环境">酒店环境</a></li>

<li><a href="#" title="酒店历史">酒店历史</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">酒店预订<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="房间查询">房间查询</a></li>

<li><a href="#" title="新增客房信息">新增客房信息</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">业务管理<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="入 住">入 住</a></li>

<li><a href="#" title="退 房">退 房</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">酒店论坛<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="我的论坛">我的论坛</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">访客留言<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="我的留言">我的留言</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">今日活动<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="colour wheel">用户积分</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

</body>

</html>

希望能帮到你。。

web标准联盟