求大神用Css编写下拉菜单，二级，三级菜单如何鼠标经过时候显示出来？ <!doctype htm 100
求大神用Css编写下拉菜单，二级，三级菜单如何鼠标经过时候显示出来？<!doctypehtml><htmllang="en"><head><metacharset="UT...
求大神用Css编写下拉菜单，二级，三级菜单如何鼠标经过时候显示出来？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body{margin=0;}
ul li{display:block;}
.nav_box{background:red;}
.nav a{font-size:12px;color:white;display:block;}
.nav{width:800px;margin-left:auto;margin-right:auto;}
.nav_right{width:100px;background:#000;float:left;}
.nav_left{width:190px;position:relative;background:blue;float:left;}
.nav_left ul{visibility:hidden;position:absolute;left:0;top:20px;background:blue;width:160px;}
.nav_left ul ul{position:absolute;left:190px;top:0px;}
.nav_left ul li :hover{background:red;visibility:visble;}
p{clear:both;}
</style>
</head>
<body>
<div class="nav_box">
<ul class="nav">
<li class="nav_left"><a href="">A1</a>
<ul>
<li><a href="">B1</a>
<ul>
<li><a href="">C1</a></li>
<li><a href="">C1</a></li>
</ul>
</li>
</li>
<li><a href="">B2</a></li>
</ul>
</li>
<li class="nav_right"><a href="">A2</a></li>
<li class="nav_right"><a href="">A2</a></li>
</ul>
<p class"clear_fix"></p>
</div>
</body>
</html> 展开
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body{margin=0;}
ul li{display:block;}
.nav_box{background:red;}
.nav a{font-size:12px;color:white;display:block;}
.nav{width:800px;margin-left:auto;margin-right:auto;}
.nav_right{width:100px;background:#000;float:left;}
.nav_left{width:190px;position:relative;background:blue;float:left;}
.nav_left ul{visibility:hidden;position:absolute;left:0;top:20px;background:blue;width:160px;}
.nav_left ul ul{position:absolute;left:190px;top:0px;}
.nav_left ul li :hover{background:red;visibility:visble;}
p{clear:both;}
</style>
</head>
<body>
<div class="nav_box">
<ul class="nav">
<li class="nav_left"><a href="">A1</a>
<ul>
<li><a href="">B1</a>
<ul>
<li><a href="">C1</a></li>
<li><a href="">C1</a></li>
</ul>
</li>
</li>
<li><a href="">B2</a></li>
</ul>
</li>
<li class="nav_right"><a href="">A2</a></li>
<li class="nav_right"><a href="">A2</a></li>
</ul>
<p class"clear_fix"></p>
</div>
</body>
</html> 展开
3个回答
展开全部
<div>
<ul>
<li>一级菜单
<div>
<ul>
<li>二级菜单</li>
</ul>
</div>
</li>
</ul>
</div>
一个盒子里面套一个盒子，在把布局做的美观点就好了。如果想横项排列的话可以让一级菜单float：left 左浮动 ，二级菜单定义为行块级 在一级菜单下，在设置为隐藏，鼠标hover时候显示，再给二级菜单布置一个背景图片，在设置一个边距border 字体颜色之类的。就好看了。
<ul>
<li>一级菜单
<div>
<ul>
<li>二级菜单</li>
</ul>
</div>
</li>
</ul>
</div>
一个盒子里面套一个盒子，在把布局做的美观点就好了。如果想横项排列的话可以让一级菜单float：left 左浮动 ，二级菜单定义为行块级 在一级菜单下，在设置为隐藏，鼠标hover时候显示，再给二级菜单布置一个背景图片，在设置一个边距border 字体颜色之类的。就好看了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
li:hover ul{display:block;}
追问
好像没用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js能很好
追答
解决
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
