如何在HTML/PHP中爲導航欄創建下拉菜單？

Question

我目前正試圖通過添加下拉菜單來擴展我的導航欄。我嘗試了一切，但似乎沒有任何工作。有沒有什麼方法可以添加下拉功能，而無需重新創建我的整個導航欄？

div.content a:link { 
 
    color: #000000; 
 
    text-decoration: normal; 
 
} 
 
div.content a:visited { 
 
    color: #000000; 
 
    text-decoration: normal; 
 
} 
 
div.content a:hover { 
 
    color: #383838; 
 
    text-decoration: normal; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 
div.content a:active { 
 
    color: #000000; 
 
    text-decoration: normal; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #595959; 
 
    max-width: 950px; 
 
    min-width: 900px; 
 
    margin: auto; 
 
    box-shadow: 0px 0px 5px #000000; 
 
    margin-bottom: 15px; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    font-style: normal; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 
li a:hover { 
 
    background-color: #404040; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="/">Home</a> 
 
    </li> 
 
    <li><a href=";insertyoutubechannel;">YouTube</a> 
 
    </li> 
 
    <li><a href=";inserttwitter;">Twitter</a> 
 
    </li> 
 
    <li><a href="/services">Services</a> 
 
    </li> 
 
    <li><a href="/contact">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

除非你想教自己，不推倒重來。

Link 1

Link 2

<div class="pure-menu pure-menu-open pure-menu-horizontal"> 
<ul> 
    <li class="pure-dropdown"> 
     <a href="#">Test1</a> 
     <ul> 
     <li><a href="#.asp">Test2</a></li> 
     <li class="pure-menu-separator"></li> 
     <li><a href="#.asp">Test3</a></li> 
     </ul> 
    </li>    
    <li class="pure-dropdown"> 
     <a href="#">Test1</a> 
     <ul> 
     <li><a href="#">Test2</a></li> 
     <li><a href="#">Test3</a></li> 
     <li><a href="#">Test4</a></li> 
     <li><a href="#">Test5</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

使用CSS

@import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css"); 

.pure-menu-horizontal ul { 
    padding:0; 
    margin:0; 
    font-weight: bold; 
    width: 100%; 
    position: relative; 
    } 

.pure-menu-horizontal ul li { 
    float:left; 
    position: relative; 
    display: block; 
    } 

.pure-menu-horizontal ul li a { 
    display:block; 
} 

.pure-menu-horizontal ul ul { 
display: block; 
position: absolute; 
top: 35px; 
} 

.pure-menu-horizontal ul li:hover > ul { 
display: list-item; 
left: auto; 
visibility: visible; 
} 

Link 3