html - 垂直菜单栏出现故障

Question

我正在尝试为大学网站创建垂直菜单栏。我在实现子级别列表的显示时遇到问题。我当前的代码产生了非常奇怪的结果。我该如何纠正？

HTML 代码：

    <div class="nav">
        <ul class="top-level">
            <li><a href="#">EME Alumni</a></li>
            <li>
                <a href="#">Alumni Reunion 2012</a>
                <ul class="sub-level">
                    <li><a href="#">RSVP</a></li>
                    <li><a href="#">Organizing Team</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Alumni Reunion 2012</a>
                <ul class="sub-level">
                    <li><a href="#">RSVP</a></li>
                    <li><a href="#">Organizing Team</a></li>
                </ul>
            </li>
        </ul>
    </div>​

CSS是：

     .nav {
margin: 3%;
width: 225px;
float: left;
}
.nav ul{list-style: none;margin:0;}
.nav a {
    float: left;
    list-style: none;
    display:block;
    text-decoration: none;
    font-size: 1.25em;
    color: #696969;
    padding: 10px;
    width: 225px;
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9),     to(#C0C0C0));
    }
    .nav a:hover {background: -webkit-gradient(linear, left top, left bottom,   from(#C0C0C0), to(#A9A9A9));}
    ul.sub-level {
        margin-left: 110%;
        display:none;
     } 
     li:hover .sub-level {
          display: block;
     }

​</p>

这是 jsfiddle 演示的链接

Answer 1

您需要对子菜单进行绝对定位，因此其父级需要相对定位：

.nav li {position:relative}

ul.sub-level { 
    display:none;
    position:absolute;
    left:250px;
    top:0;
}

你不需要浮动你的A-tag，也不需要position:relative它，因为它没有孩子。