如何防止下拉菜单拉伸导航栏

Question

如何防止下拉菜单拉伸导航栏？ 我试图从根本上找到一种方法来将“交易”标签与其余的下拉列表隔离开，这样就不会影响整个导航栏。 我是webdesign btw的新手。

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并将其相对于navbar定位（ 50px似乎正确）

码笔

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