Question

我的网站主页上有1个侧面菜单。并且某些列表具有子菜单。在悬停时，我想显示它。首先，我什么都不显示，然后在悬停时显示，但未显示。

#menu {
  width: 15%;
  height: 100%;
  background: #424242;
  color: white;
  float: left;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
  list-style: none;
  font-size: 20px;
  padding: 15px 20px;
  cursor: pointer;
}

#menu li:hover {
  background-color: #90CAF9;
}

#menu li.active {
  background-color: #2196F3;
}

#menu li ul {
  display: none;
}

#menu li:hover ul {
  display: block;
  position: absolute;
  left:100%
}

<div id="menu">
  <ul>
    <li onClick="Dashboard();">Dashboard</li>
    <li>Employee &gt;
      <ul>
        <li>Add Employee</li>
        <li>Employee View</li>
      </ul>
    </li>
    <li>Leave</li>
    <li>Salary</li>
    <li>Change Password</li>
  </ul>
</div>

Answer 1

#menu {
  width: 150px;
  height: 100%;
  background: #424242;
  color: white;
  float: left;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
  list-style: none;
  font-size: 20px;
  padding: 15px 20px;
  cursor: pointer;
}

#menu li:hover {
  background-color: #90CAF9;
}

#menu li.active {
  background-color: #2196F3;
}

#menu ul li ul {
  display: none;
}

#menu ul li.submenu {
  position: relative
}

#menu ul li.submenu ul {
    position: absolute;
    left: 150px;
    width: 200px;
    top: 0;
    background: #333
}

#menu ul li.submenu:hover ul {
  display: inline-block
}

<div id="menu">
  <ul>
    <li onClick="Dashboard();">Dashboard</li>
    <li class="submenu">Employee &gt;
      <ul>
        <li>Add Employee</li>
        <li>Employee View</li>
      </ul>
    </li>
    <li>Leave</li>
    <li class="submenu">Salary
      <ul>
        <li>Add Employee</li>
        <li>Employee View</li>
      </ul>
    </li>
    <li>Change Password</li>
  </ul>
</div>

还将.submenu类添加到子菜单下拉列表父li。

Answer 2

尝试

 
    /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i;
    
    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
          dropdownContent.style.display = "none";
        } else {
          dropdownContent.style.display = "block";
        }
      });
    }

 
    body {
        font-family: "Lato", sans-serif;
    }
    
    /* Fixed sidenav, full height */
    .sidenav {
        height: 100%;
        width: 200px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    /* Style the sidenav links and the dropdown button */
    .sidenav a, .dropdown-btn {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 20px;
        color: #818181;
        display: block;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        outline: none;
    }
    
    /* On mouse-over */
    .sidenav a:hover, .dropdown-btn:hover {
        color: #f1f1f1;
    }
    
    /* Main content */
    .main {
        margin-left: 200px; /* Same as the width of the sidenav */
        font-size: 20px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }
    
    /* Add an active class to the active dropdown button */
    .active {
        background-color: green;
        color: white;
    }
    
    /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
    .dropdown-container {
        display: none;
        background-color: #262626;
        padding-left: 8px;
    }
    
    /* Optional: Style the caret down icon */
    .fa-caret-down {
        float: right;
        padding-right: 8px;
    }
    
    /* Some media queries for responsiveness */
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   
    </head>
    <body>
    
    <div class="sidenav">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#clients">Clients</a>
      <a href="#contact">Contact</a>
      <button class="dropdown-btn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <a href="#contact">Search</a>
    </div>
    
    <div class="main">
      <h2>Sidebar Dropdown</h2>
      <p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p>
      <p>This sidebar is of full height (100%) and always shown.</p>
      <p>Some random text..</p>
    </div>
    
   
    </body>
    </html>

如何在HTML和CSS的侧面菜单中创建子菜单

2 个答案: