用div+css做多级下拉菜单怎么做
在css里该如何写样式，在访问过后要有访问的标志。我是一个初学者，对这些大都不懂，求解答，谢谢...
在css里该如何写样式，在访问过后要有访问的标志。我是一个初学者，对这些大都不懂，求解答，谢谢
展开
5个回答
展开全部
给你个源码作为参考 用纯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="#">Product</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>
____________________________________
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="#">Product</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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
下拉菜单需要配合js，说简单就是用JS，控制div的显示与隐藏
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
可以自定义位置和样式 比较实用
里面有教程和源码
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?3=e&id=11931
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
呃简单的办法……你把默认主题里菜单部分弄下来就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
个人感觉，用JS比较好，你可以学下JS。呵呵。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
