html - 在 CSS 中发布构建悬停菜单

Question

我正在尝试构建一个纯 CSS 悬停菜单，但我当前的代码有两个问题。

• 当用户将鼠标悬停在带有子菜单 ul 标签的 li 标签上时，它会将元素向上推，而不是将鼠标悬停在下方。
• 子菜单 ul 标签没有占用父级 li 标签的宽度

这是源代码:

您还可以在此处查看代码的工作副本:http://jsfiddle.net/Fbgug/

HTML:

<ul id="subnav">
    <li class="subnavtab">
        <a href="">Plan Your Visit</a>
        <ul class="sub-menu">
            <li><a href="">Fee and Hours</a></li>
            <li><a href="">Directions</a></li>
            <li><a href="">Field Trips</a></li>
            <li><a href="">Birthday Parties</a></li>
            <li><a href="">Rentals</a></li>
        </ul>
    </li>
    <li class="subnavtab">
        <a href="">Tour the Museum</a>
        <ul class="sub-menu">
            <li><a href="">Artville</a></li>
            <li><a href="">ArtZone</a></li>
            <li><a href="">Exhibitions</a></li>
        </ul>
    </li>
    <li class="subnavtab">
        <a href="">Program & Events</a>
        <ul class="sub-menu">
            <li><a href="">Weather or Not</a></li>
            <li><a href="">Classes & Workshops</a></li>
        </ul>
    </li>
    <li class="subnavtab"><a href="">Membership</a></li>
    <li class="subnavtab"><a href="">Donate</a></li>
</ul>

CSS:

#subnav { margin-top: 20px; width: 740px; float: left; position: relative; }
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 1px 0 1px; display: inline-block;
             -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
             -webkit-border-radius-topright: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px;
             -webkit-border-radius-topleft: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px; 
             border-radius: 15px 15px 0px 0px;
             behavior: url(pie.htc);
}

.subnavtab:first-child { margin-right: 3px; margin-left: 0px; }

.subnavtab:last-child { margin-right: 0px; margin-left: 3px; }

.subnavtab a { color: #000; text-decoration: none; font-weight: bold; font-size: large; }
.subnavtab a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: large; }

#subnav ul.sub-menu
{
    display: none;
    position: relative;
    left: -10px;
    padding: 10px;
    z-index: 90;
    list-style-type: none;
    margin-left: 5px;
}

#subnav ul.sub-menu li { text-align: left; }

#subnav li:hover ul.sub-menu { display: block; background-color: #A1CD3A; 
                               -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px;
                               -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px;
                               border-radius: 0px 0px 15px 15px;
                               behavior: url(pie.htc);  
}

#subnav ul.sub-menu a { color: #000; text-decoration: none; font-weight: bold; font-size: small; }
#subnav ul.sub-menu a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: small;  }

Answer 1

因为你的 li 元素有 display: inline-block 添加 vertical-align: top; 应该可以解决这个问题:

.subnavtab {
    ...
    vertical-align: top;
}

http://jsfiddle.net/Fbgug/1/