Question

我必须使用此菜单，我想添加一个下拉菜单。

我尝试添加ul li / ul ul / ul li : hover >li但没有任何反应，也许我会叠加样式？

HTML：

<nav class="nav-collapse">
   <ul>
      <li><a class="select" href="#">RIVIERA</a></li>
      <li><a href="#">quality</a></li>
      <li><a href="#">hi-tech</a></li>
      <li><a href="#">DISCOVER</a></li>
      <li><a href="#">products</a></li>
      <li><a href="#" class="last">Contact</a></li>
   </ul>
</nav>

CSS：

.nav-collapse ul {
     margin: 0;
     padding: 0;
     width: 100%;
     max-width:1000px;
     display: block;
     list-style: none;
 }
 .nav-collapse li {
     width: 100%;
     display: block;
 }
 .nav-collapse.opened {
     max-height: 9999px !important;
 }
 .nav-collapse {
     padding-top:20px;
 }
 .nav-collapse, .nav-collapse * {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 .nav-collapse, .nav-collapse ul {
     list-style: none;
     width: 100%;
     margin:0 auto;
 }
 .nav-collapse li {
     float: left;
     width: 100%;
 }
 .nope a {
     padding:0.1em !important;
 }
 .nav-collapse a {
     color: #333;
     text-decoration: none;
     width: 100%;
     padding:1em;
     background: #fff;
     border-bottom: 1px solid #e38d69;
     float: left;
     font-size:15px;
     font-family:'Open Sans', sans-serif;
     letter-spacing:2px;
     text-transform:uppercase;
     font-weight: 700;
 }
 .nav-collapse ul ul a {
     background: #ca3716;
     padding-left: 2em;
 }

Answer 1

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width:1000px;
  display: block;
  list-style: none;

}

.nav-collapse li {
  width: 100%;
  display: block;
}

.nav-collapse.opened {
  max-height: 9999px !important;
}


.nav-collapse{
    padding-top:20px;

}

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  margin:0 auto;

}

.nav-collapse li {
  float: left;
  width: 100%;

}

.nope a{
    padding:0.1em !important;
  }


.nav-collapse a {
  color: #333;
  text-decoration: none;
  width: 100%;
  padding:1em;
  background: #fff;
  border-bottom: 1px solid #e38d69;
  float: left;
  font-size:15px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight: 700;

}

.nav-collapse ul li a {
  background: #ca3716;
  padding-left: 2em;
}
.nav-collapse ul li a:hover {
  background: green;
  padding-left: 2em;
}

<nav class="nav-collapse">
      <ul>
        <li><a class="select" href="#">RIVIERA</a></li>
        <li><a href="#">quality</a></li>
        <li><a href="#">hi-tech</a></li>
        <li><a href="#">DISCOVER</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#" class="last">Contact</a></li>
      </ul>
    </nav>

CSS ADD DROP-DOWN MENU

1 个答案: