Question

CSS子菜单不再出现

这在工作，我做了一些事情，我不知道这是代码问题还是CSS问题。如果帖子格式不正确，请原谅我，这是我第一次在Stackoverflow上发帖。

html

    <nav class='navClass'>
          <ul>
             <li>Home</li>
             <li>Things To Do</li>
               <ul class="sub-menu">
                  <li>Shopping</li>
                  <li>Attractions</li>
                  <li>Outdoor Fun</li>
               </ul>
               </li>
             <li>Places To Stay</li>
             <li>Where to Eat</li>
             <li>Contests</li>
             <li>History</li>
             <li>Events</li>
          </ul>
    </nav>

css

    .navClass > ul{
    background-color: #e56109;
    color:#ffffff;
    margin-top: 0px;
    font-size: 20px;
    font-family: Arial;
}

.navClass > ul li{
    list-style-type: none;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;

}

.navClass > ul li:hover{
    background-color: #212121;
    position: relative;

}

ul.sub-menu{
    position: absolute;
    background-color: #e56109;
    list-style-type: none;
    width: 200px;
    margin-left: -25px;
    padding-bottom: 0px;
    margin-top: 10px;
    opacity: 0;


}

ul.sub-menu li{
    padding-left: 25px;
    padding-top: 5px;
    font-size: 15px;


}

ul.sub-menu li:hover{
    color: #ffffff;
    display: block;


}

.navClass li:hover .sub-menu{
    opacity: 1;

}

子菜单项需要从父项下拉。在这种情况下，“要做的事情”项。

Answer 1

您的HTML代码中有一个简单的错误。
您之前已经关闭了<li>标签。

使用这个：

   <nav class='navClass'>
          <ul>
             <li>Home</li>
             <li>Things To Do
               <ul class="sub-menu">
                  <li>Shopping</li>
                  <li>Attractions</li>
                  <li>Outdoor Fun</li>
               </ul>
               </li>
             <li>Places To Stay</li>
             <li>Where to Eat</li>
             <li>Contests</li>
             <li>History</li>
             <li>Events</li>
          </ul>
    </nav>

Answer 2

 .navClass > ul{
    background-color: #e56109;
    color:#ffffff;
    margin-top: 0px;
    font-size: 20px;
    font-family: Arial;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.sub-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .sub-menu {
  display: block;
  background-color: #000000;
      cursor: pointer;
}

.navClass > ul li:hover{
    background-color: #212121;
    position: relative;
    

}

<nav class='navClass'>
          <ul class='t'>
             <li class='b'>Home</li>
             <span class="dropdown">
             <li>Things To Do</li>
             <span>
               <ul class="sub-menu">
                  <li>Shopping</li>
                  <li>Attractions</li>
                  <li>Outdoor Fun</li>
              </ul>
             <li>Places To Stay</li>
             <li>Where to Eat</li>
             <li>Contests</li>
             <li>History</li>
             <li>Events</li>
          </ul>
    </nav>

CSS子菜单未显示

2 个答案: