html - 向左浮动的 CSS 下拉菜单问题

Question

我正在努力让下拉菜单的下拉部分下拉...我有一个水平导航栏，它覆盖了页面的宽度。当我将鼠标悬停在按钮上时，我第一次放入所有代码时，所有菜单都会出现在菜单上的第一个按钮上，我已经尝试了很多，但无法让它工作。

这是我的 CSS

#top {
overflow: hidden;
margin-top: 5px;
float: none;
text-align: left;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 14.2857%;
display: block;
float: left;
text-align: center;
text-transform: uppercase;
background-color: rgba(48,48,48,0.50);
color: rgba(255,255,255,1.00);
padding-top: 6px;
padding-bottom: 6px;
font-size: small;
font-style: normal;
font-weight: normal;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
background-color: rgba(48,48,48,1.00);
text-decoration: none;
font-weight: normal;
}
#mainnav ul li:hover > ul{ display:block;}
#mainnav ul ul {display:none; position:fixed;}
#mainnav ul ul li {display: inline-block;}

这是 HTML

<header id="top">
    <img src="/images/Logo.png">
    <nav id="mainnav">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/Team/">Our Team</a></li>
            <li><a href="/Gallery/">Gallery</a></li>
            <li><a href="/Services/">Services</a>
                <ul>
                    <li><a href="/Services/Highlights/">Highlights</a></li>
                    <li><a href="/Services/Tints/">Tints</a></li>
                    <li><a href="/Services/Packages/">Packages</a></li>
                    <li><a href="/Services/Extensions/">Extensions</a></li>
                    <li><a href="/Services/Cuts/">Cuts</a></li>
                    <li><a href="/Services/Dries/">Dries</a></li>
                </ul>
            </li>
            <li><a href="/Testimonials/">Testimonials</a></li>
            <li><a href="/Contact/" class="thispage">Contact</a></li>
            <li><a href="/Shop/">Shop</a></li>
        </ul>
    </nav>
</header>

因此，当我将鼠标悬停在“服务”上时，下拉菜单会水平显示在“主页”按钮上方，而且非常小。我希望它像其他按钮一样下拉并成为常规尺寸。

感谢所有帮助，并将在代码中进行注释。

Answer 1

你不需要任何漂浮来完成这项工作，如果你漂浮，它实际上会增加搞砸的机会。这是一个保留原始宽度的非 float 解决方案:

#top {
 margin-top: 5px;
 float: none;
 text-align: left;
}
#mainnav ul {
 list-style: none;
 display: inline;
 margin: 0;
 padding: 0;
}
#mainnav ul li, #mainnav ul li ul li {
 display: inline-block;
 position: relative;
 width: 14.2857%;
 text-align: center;
 text-transform: uppercase;
 background-color: rgba(48,48,48,0.50);
 padding: 6px 0;
 margin: 0 0 0 -4px;
 font-size: small;
}
#mainnav ul li:hover, #mainnav ul li ul li:hover {
 background-color: rgba(48,48,48,1.00);
 text-decoration: none;
}
#mainnav ul li a, #mainnav ul li ul li {
 color: rgba(255,255,255,1.00);
}
#mainnav ul li ul {
 position: absolute;
 top: 28px;
 left: 0;
 display: none;
 visibility: hidden;
 padding: 0;
 margin: 0;
}
#mainnav ul li ul li {
 display: block;
 width: 100%;
}
#mainnav ul li:hover ul {
 display: block;
 opacity: 1;
 visibility: visible;
}

这是一个 JSFiddle:http://jsfiddle.net/tc9q3bs9/