css drow down menu

<style type="text/css">
body{font-family:georgia;}
#container{width:500px;margin:auto;font-size:11pt;}

#menu{position:absolute;margin-top:10px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}

#menu ul:hover .item a{color:#fff;text-decoration:none;}
#menu ul:hover .item a:hover{color:#999;}

#menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
.clear{clear:both;height:10px;}
</style>

</head>
<body>
<div id="container">
<h1>css drop down</h1>

<div id="menu">

<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>

<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>

</ul>

<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>

<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>

<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>
</div>
</div>

 

你可能感兴趣的:(css)