html - 如何防止下拉菜单拉伸(stretch)导航栏

Question

如何防止下拉菜单拉伸(stretch)导航栏？我试图基本上找到一种方法将交易选项卡与下拉列表的其余部分隔离开来，这样它就不会影响整个导航栏。顺便说一句，我是网页设计的新手。

XHTML:

<div id="nav-bar">
      <ul>
          <li><a href="#home-pge">home</a></li>

          <li class="navbar-drop">
            <a class="navbar-edit">deals</a>
            <div class="navbar-drop-content">
                <a href="#opt1">option 1</a>
                <a href="#opt2">option 2</a>
                <a href="#opt3">option 3</a>
            </div>
          </li>

          <li><a href="#about-us-pge">about us</a></li>
          <li><a href="#contact-pge">contact</a></li>
          <li><a href="#howto-pge">how to</a></li>
      </ul>
  </div>

CSS:

 #nav-bar ul{
      list-style-type:  none;
      margin:           0;
      padding:          0;
      overflow:         hidden;
      background-color: #666666;
      width:            100%;
      position:         fixed;
      top:              80px;

  #nav-bar li{
      float:            left;
      border-right:     3px inset gray;
  }
  #nav-bar li a{
      display:          block;

      height:           25px;
      width:            150px;

      text-decoration:  none;
      text-transform:   capitalize;
      text-align:       center;

      color:            white;
      padding:          15px 15px 10px 15px;
  }
  #nav-bar li a:hover{
    background-color:   #C4BCB9;
  }
  #nav-bar li:last-child{
         border-right: none;
  }

css的下拉部分:

#nav-bar li a, .navbar-edit{/*edits the "Deals" tab if needed*/
        cursor:             pointer;
    }

    .navbar-drop:hover .navbar-drop-content{/*Displays the "dropdown box" when the navbar element is hovered over*/
        display:            block;
    }

    .navbar-drop-content{/*this edits the dropdown card itself*/
        display:            none;
        box-shadow:         0px 8px 16px 0px rgba(0,0,0,0.2);/*to make the dropdown menu look like a "card"*/
        width:              100%;
    }
    #nav-bar li .navbar-drop-content a{/*edits the links in the drop down*/
        color:              black;
        background-color:   #F5F3EF;
        text-decoration:    none;
        text-align:         left;
    }
     #nav-bar li .navbar-drop-content a:hover{/*edits the links in the dropdown when hovered*/
        background-color:   red;
        cursor:             url("1note.png"), crosshair;
    }

Answer 1

1. 从 #nav-bar ul 中移除 overflow:hidden
2. 给 navbar-drop position: relative
3. 给 navbar-drop-content position: absolute 并相对于导航栏定位它(50px 似乎是正确的)

codepen

#nav-bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
  background-color: #666666;
  width: 100%;
  position: fixed;
  top: 80px;
}

#nav-bar li {
  float: left;
  border-right: 3px inset gray;
}

#nav-bar li a {
  display: block;
  height: 25px;
  width: 150px;
  text-decoration: none;
  text-transform: capitalize;
  text-align: center;
  color: white;
  padding: 15px 15px 10px 15px;
}

#nav-bar li a:hover {
  background-color: #C4BCB9;
}

#nav-bar li:last-child {
  border-right: none;
}

#nav-bar li a,
.navbar-edit {
  /*edits the "Deals" tab if needed*/
  cursor: pointer;
}

.navbar-drop {
  position: relative;
}

.navbar-drop:hover .navbar-drop-content {
  /*Displays the "dropdown box" when the navbar element is hovered over*/
  display: block;
}

.navbar-drop-content {
  /*this edits the dropdown card itself*/
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /*to make the dropdown menu look like a "card"*/
  width: 100%;
  position: absolute;
  top: 50px;
  z-index: 1000;
}

#nav-bar li .navbar-drop-content a {
  /*edits the links in the drop down*/
  color: black;
  background-color: #F5F3EF;
  text-decoration: none;
  text-align: left;
}

#nav-bar li .navbar-drop-content a:hover {
  /*edits the links in the dropdown when hovered*/
  background-color: red;
  cursor: url("1note.png"), crosshair;
}

<div id="nav-bar">
  <ul>
    <li><a href="#home-pge">home</a></li>

    <li class="navbar-drop">
      <a class="navbar-edit">deals</a>
      <div class="navbar-drop-content">
        <a href="#opt1">option 1</a>
        <a href="#opt2">option 2</a>
        <a href="#opt3">option 3</a>
      </div>
    </li>

    <li><a href="#about-us-pge">about us</a></li>
    <li><a href="#contact-pge">contact</a></li>
    <li><a href="#howto-pge">how to</a></li>
  </ul>
</div>