如何添加下拉菜單？

Question

我有一個現有的網站，下面的菜單代碼，我想添加更多的東西到我的網站，但用戶需要nevigate到這些網頁，請幫我添加一個子菜單下拉到我有的代碼。請幫忙？

HTML：

<!-- Header --> 
<div id="header"> 
    <div id="nav-wrapper"> 
    <!-- Nav --> 
    <nav id="nav"> 
     <ul> 
     <li class="active"><a href="index.html">Homepage</a></li> 
     <li><a href="left-sidebar.html">Left Sidebar</a></li> 
     <li><a href="right-sidebar.html">Right Sidebar</a></li> 
     <li><a href="no-sidebar.html">No Sidebar</a></li> 
     </ul> 
    </nav> 
    </div> 
</div> 

CSS：

#nav { 
} 

#nav-wrapper { 
    background: rgba(0,0,0,.1); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

#nav > ul { 
    margin: 0; 
    padding: 0; 
    text-align: center;   
} 

#nav > ul > li { 
    display: inline-block; 
    border-right: 1px solid; 
    border-color: rgba(255,255,255,.1); 
} 

#nav > ul > li:last-child { 
    padding-right: 0; 
    border-right: none; 
} 

#nav > ul > li > a, #nav > ul > li > span { 
    display: inline-block; 
    padding: 1.5em 1.5em; 
    letter-spacing: 0.06em; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 1.1em; 
    outline: 0; 
    color: #FFF; 
} 

#nav li.active a { 
    color: #FFF; 
} 

#nav > ul > li > ul { 
    display: none; 
} 

#nav li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

Answer 1

改變你的CSS像

#nav li:hover > ul 
    { 
     opacity: 1; 
     display: block; 
     margin: 0; 
     position:absolute; 
     background:green; 
    } 

<nav id="nav"> 
    <ul> 
     <li class="active"><a href="index.html">Homepage</a> 
     <ul> 
      <li><a href="index.html">Homepage</li> 
      <li><a href="pictures.html">Pictures</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
     </li> 
     <li><a href="pictures.html">Pictures</a></li> 
     <li><a href="contact.html">Contact</a></li> 

    </ul> 
</nav> 

Answer 2

CSS：

#nav 
{ 
} 

#nav-wrapper 
{ 
    background: rgba(0,0,0,.1); 
    text-align:center; 
    margin:0; 
    padding:0; 
    width: 100%; 
} 


#nav ul { 
    display: inline; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    border-right: 1px solid; 
    border-color: rgba(255,255,255,.1); 
    color: white; 
} 
ul li { 
    border-right: 1px solid; 
    border-color: rgba(255,255,255,.1); 
    display: inline-block; 
    margin: -4px; 
    position: relative; 
    padding: 15px 20px; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
    text-align: center; 
    color: white; 
} 
ul li:hover { 
    border-right: 1px solid; 
    border-color: rgba(255,255,255,.1); 
    color: white; 
} 
ul li ul { 
    position: absolute; 
    top: 90px; 
    left: 0; 
    width: 200px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
ul li ul li { 
    border-right: 1px solid; 
    border-color: rgba(255,255,255,.1); 
    background: rgba(0,0,0,.1); 
    display: block; 
    text-transform: uppercase; 
    font-size: 1.1em; 
    outline: 0; 
    color: #FFF; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 


#nav ul li a, 
#nav ul li span 
{ 
    display: inline-block; 
    padding: 1.5em 1.5em; 
    letter-spacing: 0.06em; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 1.1em; 
    outline: 0; 
    color: #FFF; 
} 

#nav li.active a 
{ 
    color: #FFF; 
} 

HTML：

<div id="header"> 
    <div id="nav-wrapper"> 
     <!-- Nav --> 
     <nav id="nav"> 
      <ul> 
       <li class="active"><a href="index.html">Homepage</a></li> 
       <li><a href="pictures.html">Pictures</a> 
       <ul> 
        <li><a href="#xcv">test</a></li> 
        <li><a href="#xcv">test2</a></li> 
       </ul> 
       </li> 
       <li><a href="contact.html">Contact</a></li> 

      </ul> 
     </nav> 
    </div> 

JSFIDDLE DEMO