HTML onclick下拉菜单

Question

我点击下面的按钮时，它会显示一个下拉菜单。

我该如何解决这个问题，因为我之前从未遇到过这个问题。

Answer 1

只是谷歌“下拉按钮的javascript”

Answer 2

我杰罗姆C.

唯一seggestion我可以给你的同意，是通常有很多网站的标题是“最好的NNN下拉菜单“或用任何东西替代dropdownmenus。

Thery通常是有帮助的。

在这种情况下：

http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/

Answer 3

http://jsfiddle.net/YQB75/2/

很简单，但它给你一个起点。

Answer 4

<style type="text/css"> 
<!-- 
body,td,th { 
font-family: Verdana, Geneva, sans-serif; 
font-size: 100%; 
color: #666; 
} 
body { 
background-color: #fff; 
margin-left: 20px; 
margin-top: 20px; 
margin-right: 20px; 
margin-bottom: 20px; 
} 

a, a:hover, a:active, a:focus { 
outline:0; 
direction:ltr; 
} 

.wrapper { 
position:relative; height:25px; 
} 

.mainmenu { 
position:absolute; 
z-index:100; 
font-family:Verdana, Geneva, sans-serif; 
font-weight:normal; 
font-size:90%; 
line-height:25px; 
left:50%; 
margin-left:-303px; 
width:606px; 
} 

ul.menu { 
padding:0; 
margin:0; 
list-style:none; 
width:100px; 
overflow:hidden; 
float:left; 
margin-right:1px; 
} 

ul.menu a { 
text-decoration:none; 
color:#fff; 
padding-left:5px; 
} 

ul.menu li.list { 
float:left; 
width:250px; 
margin:-32767px -125px 0px 0px; 
background:url(images/top1.png) no-repeat left bottom; 
} 

ul.menu li.list a.category { 
position:relative; 
z-index:50; 
display:block; 
float:left; 
width:120px; 
margin-top:32767px; 
background:transparent; 
} 

ul.menu li.list a.category:hover, 
ul.menu li.list a.category:focus, 
ul.menu li.list a.category:active { 
margin-right:1px; 
background-image:url(images/tophover1.png); 
background-repeat:no-repeat; 
background-position:left top; 
} 

ul.submenu { 
float:left; 
padding:25px 0px 0px 0px; 
margin:0; 
list-style:none; 
background-image:url(images/tophover1.png); 
background-repeat:no-repeat; 
background-position:left top; 
margin:-25px 0px 0px 0px; 
} 

ul.submenu li a { 
float:left; 
width:120px; 
background:#369; 
clear:left; 
} 

ul.submenu li a.endlist { 
background:url(images/bottom1.png); 
} 

ul.submenu li a.endlist:hover, 
ul.submenu li a.endlist:focus, 
ul.submenu li a.endlist:active { 
background:url(images/bottomhover1.png); 
} 

ul.submenu a:hover, 
ul.submenu a:focus, 
ul.submenu a:active { 
background:#900; 
margin-right:1px; 
} 
--> 


</style> 


<div class="wrapper"> 
<div class="mainmenu"> 
<ul class="menu"> 
<li class="list"> 
<a class="category" href="#Home">Home</a> 
</li> 
</ul> 
<ul class="menu"> 
<li class="list"> 
<a class="category" href="#about">About Us&nbsp;&nbsp;&raquo;</a> 
<ul class="submenu"> 
    <li><a href="#about1">About link 1</a></li> 
    <li><a href="#about2">About link 2</a></li> 
    <li><a href="#about3">About link 3</a></li> 
     <li><a href="#about4">About link 4</a></li> 
    <li><a class="endlist" href="#about5">About link 5</a></li> 
</ul> 
</li> 
</ul> 
<ul class="menu"> 
<li class="list"> 
<a class="category" href="#articles">Articles&nbsp;&nbsp;&raquo;</a> 
<ul class="submenu"> 
    <li><a href="#articles1">Articles link 1</a></li> 
    <li><a href="#articles2">Articles link 2</a></li> 
    <li><a href="#articles3">Articles link 3</a></li> 
    <li><a class="endlist" href="#articles4">Articles link 4</a></li> 
</ul> 
</li> 
</ul> 
<ul class="menu"> 
<li class="list"> 
<a class="category" href="#news">News&nbsp;&nbsp;&raquo;</a> 
<ul class="submenu"> 
    <li><a href="#news1">News link 1</a></li> 
    <li><a href="#news2">News link 2</a></li> 
    <li><a class="endlist" href="#news3">News link 3</a></li> 
</ul> 
</li> 
</ul> 
<ul class="menu"> 
<li class="list"> 
<a class="category" href="#donate">Donate</a> 
</li> 
</ul> 
<ul class="menu"> 
<li class="list"> 
<a class="category" href="#contact">Contact</a> 
</li> 
</ul> 
<!-- end mainmenu --></div> 
<!-- end wrapper --></div> 

或尝试此链接

http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129 

或

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/