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

从overflow:hidden

#nav-bar ul

提供navbar-drop position: relative
提供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>

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

1 个答案: