左侧浮动的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>

因此，当我将鼠标悬停在“服务”上时，下拉菜单会在“主页”按钮上水平显示，并且非常小。我想要这个下降并成为常规的＆＃39;大小就像其他按钮一样。

所有帮助表示赞赏，并会在代码中发表评论。

Answer 1

主要问题是标题和子列表的样式存在冲突，您将定位应用于a元素而不是包含它的li。所以

• 浮动li而不是a
• 将孩子ul定位为绝对，而非固定
• 不要让孩子li漂浮，以便他们出现在彼此之下
• 将子a显示为块和全宽，因此它们可以很好地排列在一个框中。

这应该效果更好 - http://jsfiddle.net/1mabsopn/1/

#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 ul li {
    float:left;
    margin:0;
    padding:0;
}
#mainnav a {
    width: 14.2857%;
    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:absolute;
}
#mainnav ul ul li {
    display: block;
    float:none;
}
#mainnav ul ul a {
    display:block;
    width:100%;
}

Answer 2

你不需要任何漂浮来完成这项工作，如果你漂浮，它实际上会增加一些东西搞砸的可能性。这是一个保留原始宽度的非浮动解决方案：

#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/

Answer 3

尝试以下，

<!DOCTYPE html>
<html>
<head>
    <style type="text/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 {
            text-align: center;
            text-transform: uppercase;

            color: rgba(255,255,255,1.00);

            font-size: small;
            font-style: normal;
            font-weight: normal;
            height: 80%;
            width: 100%;
            padding-top: 6px;
            padding-bottom: 6px;
        }
        #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 li > ul{display:block}
        #mainnav ul li {
            width: 14.2857%;
            float: left;
            background-color: rgba(48,48,48,0.50);
            height: 26px;
            padding-top: 3px;
        }
        #mainnav ul ul {

            display: none;
            position: absolute;
            margin-top: 6px;
        }
        #mainnav ul li > ul li{
            clear: left;
            background-color: red;
            width: 100%;
        }

#mainnav ul ul {display:none; position:fixed;}

#mainnav ul ul li {display: inline-block;}
    </style>
</head>
<body>
    <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>
</body>
</html>