css 带子菜单的水平导航栏

Posted 2021-05-13

<nav>
       <ul class="menu">
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li><a href="">Menu Item</a></li>
            <li class="dropdown">
                  <a href="">Sub Menu</a>
                  <div class="dropdown-list">
                          <a href="" target="_blank">Sub Menu Item</a>
                          <a href="" target="_blank">Sub Menu Item</a>
                          <a href="" target="_blank">Sub Menu Item</a>
                          <a href="" target="_blank">Sub Menu Item</a>
                          <a href="" target="_blank">Sub Menu Item</a>
                    </div>

                </li>
                <li><a href="">Menu Item</a></li>
                <li><a href="">Menu Item</a></li>
                <li class="dropdown">
                  <a href="">Sub Menu</a>
                    <div class="dropdown-list">
                        <a href="#">Sub Menu Item</a>
                        <a href="#">Sub Menu Item</a>
                    </div>

                </li>
            </ul>
            </nav>
              

nav{
  text-align: center;
  background-color:black;
}
ul{
  margin:0;
  padding:0;
  text-align: center;
  list-style-type: none;
  display: inline-block;
}
nav ul li{
  float:left;
}
nav a{
  display: inline-block;
  padding:17px 17px;
  height:25px;
  line-height:25px;
  color:#fff;
  text-decoration: none;
}
.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown-list{
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: 150px; 
}
.dropdown-list a{
    color:black;
    text-decoration: none;
    display: block;
}
.dropdown-list a:hover {
  background-color: #222222;
  color:white;
}
.dropdown:hover .dropdown-list {
    display: block;
}