用div+css做多级下拉菜单怎么做

发布网友发布时间：2022-04-06 12:25

共5个回答

热心网友时间：2022-04-06 13:54

给你个源码作为参考用纯CSS+HTML编写而成
____________________________________
Suckerfish下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
ul.nav,ul.nav ul
{
margin:0;
padding:0;
list-style-type:none;
font:left;
}
ul.nav li
{
float: left;
width: 8em;
background-color: #8BD400;
}
ul.nav li ul
{
width: 8em;
position: absolute;
left: -999em;
}
.nav li:hover ul
{
left: auto;
}
ul.nav a
{
display: block;
color: #2B3F00;
text-decoration: none;
padding: 0.3em 1em;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}
ul.nav li li a
{
border-bottom: 1px solid #486B02;
border-top: 1px solid #486B02;
border-right: 0;
border-left: 0;
}
ul.nav li:last-child a
{
border-right: 0;
border-bottom: 0;
}
ul a:hover, ul a:focus
{
color: #E4FFD3;
background-color: #6DA203;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Proct</a>
<ul>
<li><a href="#">SilverBack</a></li>
<li><a href="#">Font Deck</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

热心网友时间：2022-04-06 15:12

下拉菜单需要配合js，说简单就是用JS，控制div的显示与隐藏

热心网友时间：2022-04-06 16:47

这里有一个js的多级联动下拉菜单
可以自定义位置和样式比较实用
里面有教程和源码

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?3=e&id=11931

热心网友时间：2022-04-06 18:38

呃简单的办法……你把默认主题里菜单部分弄下来就行了

热心网友时间：2022-04-06 20:46

个人感觉，用JS比较好，你可以学下JS。呵呵。