下拉链接无法正确显示

Question

我有一个带下拉菜单的导航栏。

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>

这应该是一个有效的下拉列表，但它会使这个：
我希望下拉列表中的链接宽度与它们上方的按钮相同。可能只是缺少一种基本风格，但我尝试了不同的定位，但它不起作用。如何正确显示链接？提前致谢。

Answer 1

基本问题是定位.dropdown-content的基础不是.dropdown而是#navbar。
通过更改并向子项添加left:0; right:0;，它会继承宽度 - 只有它不可见。从overflow: hidden中删除#navbar，您就差不多了 最后一件事是下拉列表中的项目仍然很大。如果要指定元素的外部宽度（包括填充和边框），则需要设置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，它将在没有它的情况下正常工作。现在它也会影响a中的.dropdown-content元素。如果没有它，你就需要更少的规则来抵消浮动。

Answer 2

Henry，我已经设法通过使用列表来确保导航栏的行为（不确定这是否可以接受）。也许有人能够找到更好的解决方案。使用列表元素来描述菜单确实有一定的语义意义，但这是个人偏好。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;