时间戳

首页 > 解决方案 > CSS下拉菜单不起作用

html - CSS下拉菜单不起作用

问题描述

我正在尝试创建下拉导航菜单。

我发现的每篇文章和视频都显示了我正在做的同样的事情，但似乎无法做到正确。

系统和表单项应该有一个下拉列表。我知道我可以使用 CSS 类作为另一种选择，但我想以这种方式工作。

该页面的 HTML 和 CSS 如下所示。

#MenuBar {
  margin-top: 15px;
}

#MenuBar ul {
  list-style: none;
  float: left;
}

#MenuBar ul a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 0px 15px;
  line-height: 32px;
}

#MenuBar ul li {
  position: relative;
  float: left;
}

#MenuBar ul li:hover {
  background: #f6f6;
}


/*Dropdown menus*/

#MenuBar ul ul {
  display: none;
  position: absolute;
}

#MenuBar ul ul li {
  width: 150px;
}

#MenuBar ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}


/*Dropdown menu items*/

#MenuBar ul li:hover ul {
  display: block;
}
<nav id="MenuBar">
  <ul>
    <li><a href="#">Systems</a></li>
    <ul>
      <li><a href="#">Email</a></li>
      <li><a href="#">Payroll</a></li>
      <li><a href="#">Finance</a></li>
    </ul>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Forms</a></li>
    <ul>
      <li><a href="#">IT</a></li>
      <li><a href="#">HR</a></li>
      <li><a href="#">Facilities</a></li>
    </ul>
    <li><a href="#">Events</a></li>
  </ul>
</nav>

标签： htmlcssdrop-down-menu

解决方案

只需将ul子项插入li父项内...
以供float左使用padding-left: 0px;

          #MenuBar{
              margin-top:15px;
          }

          #MenuBar ul{
              list-style:none;
              float:left;
          }

          #MenuBar ul a{
              display:block;
              color:#333;
              text-decoration:none;
              padding:0px 15px;
              line-height:32px;
          }

          #MenuBar ul li{
              position:relative;
              float:left;
          }

          #MenuBar ul li:hover{
              background:#f6f6;
          }
  #MenuBar ul li:hover ul{
              display:block;
          }
          /*Dropdown menus*/
          #MenuBar ul ul{
              display: none;
              position:absolute;
          }
          #MenuBar ul ul li{
              width:150px;
          }

          #MenuBar ul ul a{
              line-height:120%;
              padding: 10px 15px;
          }
          /*Dropdown menu items*/
          #MenuBar ul li:hover  ul{
              display:block;
              padding-left: 0px;
              }
              <nav id="MenuBar">
                  <ul>
                      <li><a href="#">Systems</a></li>
                          <ul>
                              <li><a href="#">Email</a></li>
                              <li><a href="#">Payroll</a></li>
                              <li><a href="#">Finance</a></li>
                          </ul>
                      <li><a href="#">Staff</a></li>
                      <li><a href="#">Forms</a>
                          <ul>
                              <li><a href="#">IT</a></li>
                              <li><a href="#">HR</a></li>
                              <li><a href="#">Facilities</a></li>
                          </ul>
                          </li>
                      <li><a href="#">Events</a></li>
                  </ul>
              </nav>

推荐阅读