导航菜单不显示下拉列表并导致格式问题（HTML + CSS）

时间：2017-03-15 09:58:36

标签： html css

我尝试使用HTML和CSS制作一个简单的下拉导航菜单。当我添加下拉列表时，我的菜单会进入两行而不是一行，并且菜单在悬停时不会显示。 jsfiddle：https://jsfiddle.net/qbwyLzqj/

我似乎无法看到我的错误在哪里。

.menu li {
  padding: 10px;
}

＆＃13;
＆＃13; 
.navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 li {
      display: none;
    }
    
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
＆＃13; 
 <nav class="navigation">
    
      <ul class="menu">
        <li id="menu-item-1"><a href="#">Portfolio</a></li>
    
        <li id="menu-item-2"><a href="#">More Info</a></li>
    
        <ul class="sub-menu-2">
          <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
          <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
          <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
          <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
        </ul>
    
        <li id="menu-item-3"><a href="#">Designs</a></li>
    
        <li id="menu-item-4"><a href="#">Shop</a></li>
    
        <li id="menu-item-5"><a href="#">Blog</a></li>
    
        <li id="menu-item-6"><a href="#">Contact</a></li>
      </ul>
    
    
    </nav>
＆＃13;
＆＃13;
＆＃13;

9 个答案:

答案 0 :(得分：1)

试试这个jsfiddle：

修改HTML 

<li id="menu-item-2"><a href="#">More Info</a>
      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
</li>

添加Css 

.sub-menu-2 {
  position: absolute;
  background: #fff;
}

jsfiddle

答案 1 :(得分：0)

请参阅以下代码。

.navigation {
  width: 80%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
  position: relative;
}

.menu li a:hover {
  color: grey;
}

.sub-menu-2 {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
}

.menu li:hover .sub-menu-2 {
  display: block;
}
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>

      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

答案 2 :(得分：0)

除了修复布局外，我认为你可以进一步改进它。

关于问题;因为您没有在其父.sub-menu-2内使用li而导致中断。我已修复它，并为您的代码添加了更多灵活性，以便在悬停父列表项时显示子菜单。

亲自检查一下。 fiddle 

.navigation {
  width: 80%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
  position: relative;
}

.menu li a:hover {
  color: grey;
}

.sub-menu-2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  text-align: left;
}

.sub-menu-2 li {
display: block;
}

.menu li:hover .sub-menu-2 {
  display: block;
}
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>

    <ul class="sub-menu-2">
      <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
      <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
      <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
      <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
    </ul>
    </li>

    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

希望它有用。干杯！

答案 3 :(得分：0)

  1. 将下拉列表ul放在li
    2. 中
  2. 使用定位来防止下拉菜单影响列表项的其余部分

    3. fiddle 

    .navigation {
  width: 100%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
}

.menu li a:hover {
  color: grey;
}

#menu-item-2 {
  position: relative;
}

.sub-menu-2 {
  display: none;
  position: absolute;
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

.sub-menu-2 li {
  padding: 10px 0;
}

.menu li:hover .sub-menu-2 {
  display: block;
}
    <!-- nav -->
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>

      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

答案 4 :(得分：0)

尝试使用更新的文件

.menu li {
  position:relative;
}
.sub-menu-2 {
    position:absolute;
    left:0;
    text-align:left;
    width:100%;

 }


.navigation {
  width: 80%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
  position:relative;
}

.menu li a:hover {
  color: grey;
}

.sub-menu-2 li {
  display: none;
}

.menu li:hover .sub-menu-2 li {
  display: block;
  padding-left:0;
}
.sub-menu-2 {
  position:absolute;
  left:0;
  text-align:left;
  width:100%;
  
}
<!-- nav -->
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>
    <ul class="sub-menu-2">
      <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
      <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
      <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
      <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
    </ul>
    </li>

    

    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

这里是小提琴fiddle

答案 5 :(得分：0)

您可以使用

<!-- nav -->
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>
    <ul class="sub-menu-2">
      <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
      <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
      <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
      <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
    </ul>

    </li>



    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>


.navigation{
   width: 80%;
  margin: 0 auto;

}
.menu,.menu ul{
  list-style:none;
  padding:0;
}
.menu >li{
  position:relative;
  display:inline-block;
   padding: 5px;
  }
  .menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
.menu >li ul{
  position: absolute;
    display: none;
    left: 0;
    top: 100%;
      display: none;
  }
  .menu >li:hover ul{
   display: block;
  }

它也是小提琴手 https://jsfiddle.net/8engpfu1/1/

答案 6 :(得分：0)

你可以试试这样的...... 

.navigation {
  width: 80%;
  margin: 0 auto;
}
.menu {
  display: inline-block;
  width: 100%;
  text-align: center;
  list-style-type: none;
  padding: 0px; 
  margin: 0px;
  display: flex;
  justify-content: center;
}
.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
.menu li {
  padding: 10px;
}
#menu-item-2 {
  position: relative;
  white-space: nowrap;
}
.sub-menu-2 {
  list-style-type: none; 
  padding: 0px;
  margin: 0px;
}
.sub-menu-2 li {
  display: none;
  padding: 0px; 
  margin: 0px;
  width: 100%;
}
.menu li:hover .sub-menu-2 li {
  display: block;
}
<nav class="navigation">
  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>
    <li id="menu-item-2"><a href="#">More Info</a>
      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li id="menu-item-3"><a href="#">Designs</a></li>
    <li id="menu-item-4"><a href="#">Shop</a></li>
    <li id="menu-item-5"><a href="#">Blog</a></li>
    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>
</nav>

答案 7 :(得分：0)

将display: none;添加到<ul class="sub-menu-2">，将菜单切换回一行。 

.sub-menu-2 {
  display: none;
}

菜单正在拆分，因为现在您只是隐藏.sub-menu-2 li，而不是.sub-menu-2。

同样将z-index定义为更高的值（如1000），以便在需要时将子菜单置于其他元素之上。

答案 8 :(得分：0)

更改您的＆＃39; menu-item-2＆＃39;像这样，

  <li id="menu-item-2"><a href="#">More Info</a>
  <ul class="sub-menu-2">
    <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
    <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
    <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
    <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
  </ul>
</li>

并将此css添加到您的代码中

    .sub-menu-2 {
      position: absolute;
      background: #fff;
     }
相关问题
最新问题