我正在尝试在http://jsfiddle.net/hozey/9dGuc/向 css 添加子菜单,但似乎无法掌握它。有人可以帮助这个新手吗?这是html。我想为 Horses 1、2 和 3 创建一个子菜单。
<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first"><a href="http://www.lawsart.com" target="_top">Home</a></li>
<li><a class="current">Portfolio ▼</a>
<ul>
<li><a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a></li>
<li><a href="http://www.lawsart.com/Horses2.html" target="_top">Horses 2</a></li>
<li><a href="http://www.lawsart.com/Horses3.html" target="_top">Horses 3</a></li>
<li><a href="http://www.lawsart.com/Dogs.html" target="_top">Dogs</a></li>
<li><a href="http://www.lawsart.com/People.html" target="_top">People</a></li>
<li><a href="http://www.lawsart.com/Stills.html" target="_top">Stills</a></li>
</ul>
</li>
<li><a href="http://www.lawsart.com/Order.html" target="_top">Order</a></li>
<li><a href="http://www.lawsart.com/Contact.html" target="_top">Contact Me</a></li>
</ul>
</div> <!-- end menu -->
</div>
这是我到目前为止的CSS:
body {
margin: 0px;
}
#wrapper {
border: px solid black;
margin: 1em auto;
font-family: Arial,Helvetica,sans-serif;
width: 760px;
text-align: left;
background-color: #cccccc;
overflow:hidden;
height:150px;
}
.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}
.menu ul li a {display:block;
text-decoration:none;
width:97px;
height:25px;
text-align:center;
color:white;
padding-left:1x;
border:px solid;
border-width:0 0px 0px 0;
background:;
line-height:25px;
font-size:1.0em;}
.menu ul {padding:0;margin:0;list-style-type: none; }
.menu ul li {float:left;position:relative;}
.menu ul li ul {visibility:hidden;position:absolute;}
.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block;
background:#444444;
color:white;
width:97px;
padding-left:1px;
border-right:none;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}