CSS添加下拉菜单

Question

I have to work with this menu, i would like to add a drop down menu.

I try to add ul li / ul ul / ul li : hover >li but nothing happens, maybe i superimpose style?

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>