Question

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

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

系统和表单项应该有一个下拉列表。我知道我可以使用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>

Answer 1

只需将ul的孩子插入父母的li内即可要float使用padding-left: 0px;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要将dropdown ul包裹在父li内，如下所示

#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;
              top: 100%;
              left: 0;
          }
          #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>
                          <ul>
                              <li><a href="#">Email</a></li>
                              <li><a href="#">Payroll</a></li>
                              <li><a href="#">Finance</a></li>
                          </ul>
                       </li>
                      <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>

工作小提琴here

CSS下拉菜单无效

2 个答案: