下拉链接显示不正确

问题描述：

我有一个带有下拉菜单的导航栏。下拉链接显示不正确

body{margin:0;} 
 
#navbar { 
 
    overflow: hidden; 
 
    background-color: #222d3d; 
 
    margin-left: 25px; 
 
} 
 
#navwrap{ 
 
    background-color: #222d3d; 
 
    width: 100%; 
 
} 
 
#navbar a { 
 
    float: left; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
#navbar a:hover { 
 
    background-color: #577baf; 
 
} 
 

 
#navbar a.active { 
 
    background-color: #577baf; 
 
} 
 
.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content{ 
 
    margin-top: 48px; 
 
    position: absolute; 
 
    background-color: #222d3d; 
 
    z-index: 1; 
 
    display: none; 
 
} 
 

 
.dropdown-content a { 
 
    color: white 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.dropdown-content a:hover {background-color: #577baf} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #222d3d; 
 
    display: block; 
 
}

<div id="navbar"> 
 
    <a class="active" href="#home">Home</a> 
 
    <div class="dropdown"> 
 
     <a class="dropbtn">Dropdown</a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
       <a href="#">Link 2</a> 
 
       <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <a href="#about">About</a> 
 
</div>

这应该使工作下拉，而是它让这样的： screenshot
我想在下拉菜单中的链接是相同的宽度为他们上面的按钮。可能只是一个基本的风格缺失，但我尝试了不同的定位，它不起作用。我如何使链接正确显示？提前致谢。

先给了'.dropbtn'一个'显示：block'，而不是'直列block'。这样，它会调整到其父级维度而不是其内容。我现在无法验证，因为我在手机上。 – Pharaoh

你能提供一个小提琴吗？ – Pharaoh

答

基本问题是，定位.dropdown-content的基础不是.dropdown而是#navbar。
通过更改并添加left:0; right:0;给孩子，它继承了宽度 - 只有它是不可见的。从#navbar删除overflow: hidden，你几乎不错。
最后一件事是，下拉菜单中的项目仍然很大。如果要指定元素的外部宽度（包括填充和边框），则需要设置box-sizing: border-box;。

Fiddle

变更（注释=删除）：

#navbar { 
    overflow: visible; 
} 

.dropdown { 
    position: relative; 
} 

.dropdown-content { 
    /* margin-top: 48px; */ 
    top: 48px; 
    left: 0; 
    right: 0; 
} 

.dropdown-content a { 
    box-sizing: border-box; 
}

顺便说一句，如果你改变了规则#navbar a { float: left; }您可以简化您的规则。如果您将项目更改为inline-block，它会正常工作。现在它也影响.dropdown-content中的a元素。没有它，你需要更少的规则来抵消浮动。

答

亨利，我设法让navbar的行为通过使用列表（不知道如果这是可以接受的）。也许有人会有更好的解决方案。它使用列表元素来描述菜单的确具有语义意义，但这是个人偏好。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #222d3d; 
 
} 
 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: #577baf; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #222d3d; 
 
    min-width: 160px; 
 
    z-index: 1; 
 
} 
 
.dropdown-content a { 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #577baf 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li class="dropdown"> 
 
     <div class="dropbtn">Dropdown</div> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
    </li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

下拉链接显示不正确

相关推荐