左下角的CSS下拉菜单问题

我努力让下拉菜单中的下拉菜单下拉下来......我有一个水平导航栏，它涵盖了页面的宽度。当我第一次把所有的代码放在按钮上的时候，所有的菜单都会出现在菜单上的第一个按钮上，我尝试了很多，并且无法使它工作。左下角的CSS下拉菜单问题

这里是我的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>

所以，当我悬停在服务下拉水平出现在Home键和相当小。我希望这下降，并像其他按钮一样，是常规的尺寸。

所有帮助表示赞赏，并将在代码中加以注释。

来源

2014-09-26 user3666207

你应该看看到添加的jsfiddle – 2014-09-26 12:58:09

我会现在去做一个，欢呼声 – user3666207 2014-09-26 13:02:03

我的JSFiddle http://jsfiddle.net/1mabsopn/ – user3666207 2014-09-26 13:04:32

你不需要任何浮动，使这项工作，它会实际增加的东西的机会搞砸了，如果你做你浮动。这里有一个非浮动的解决方案，保留了原来的宽度：

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

来源

2014-09-26 13:25:31

谢谢@ coderboi_89这个工作好得多，只是事实上下拉不与服务标签具有相同的宽度，你能建议我怎么能做到这一点？ – user3666207 2014-09-26 13:37:28

我很抱歉，我一直在不同的网站测试。这是一个更新版本：http://jsfiddle.net/tc9q3bs9/2/。这个宽度为'#mainnav ul li ul'设置为100％，并将'margin：0;'添加到'#mainnav ul li ul li'（我注意到-4px偏离了主选项）。 – 2014-09-26 13:50:42

主要问题是您的标题和子列表获得了相互冲突的样式，并且您将定位应用于a元素而不是包含它的li。所以

浮法li不是a
位置的子ul S作为绝对的，不是固定不变的
，使他们出现相互
显示子底下不浮动孩子li小号a s作为块和全宽，所以他们很好地排列在一个盒子里。

这应该更好地工作 - 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%; 
}

来源

2014-09-26 13:11:04 Rhumborl

工作一个梦想，我只需要再次添加我的宽度。感谢Rhumborl！你想收到我提及的细节吗？ – user3666207 2014-09-26 13:13:26

只是一个快速的不 - 你可能想要指定你的li为'#mainnav> ul> li'作为它的方式，你所有的lis（甚至第二级）将被设置为左浮动 – Pete 2014-09-26 13:20:29

是的，这意味着你不会'需要'#mainnav ul ul li {display：block;浮动：无; }'但是如果你出于某种原因将顶端'ul'包装在另一个元素中，它将会崩溃。摇摆和环岛... – Rhumborl 2014-09-26 13:23:30

尝试下面，

<!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>

来源

2014-09-26 13:26:02

左下角的CSS下拉菜单问题

回答

相关问题