css中ul下的li下的用ul写的二级菜单为什么下不来，并和li并列了，二级菜单的css代码是怎么
发布网友
发布时间：2022-04-06 12:25
共2个回答
热心网友
时间：2022-04-06 13:54
一、二级菜单不下来原因有以下方面：
1、HTML代码各层级嵌套错误；
2、CSS样式控制中没有使用定位属性；
3、定位数值计算错误；
二、正确的解决方案
1、清晰的HTML代码层级，如下：
<li class="nav">
<a href="#">网站首页</a>
</li>
<li class="nav">
<a href="#">产品分类</a>
<ul class="subnav">
<li><a href="#">电脑</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">显示器</a></li>
</ul>
</li>
</ul>
2、清晰的CSS定位属性，代码如下：
<style type="text/css">ul,li{margin:0px;padding:0px;list-style:none;}
a{color:#fff;text-decoration:none;}
.menu a{display:block;padding:0px 30px;}
.menu a:hover{background:#da2128;}
.menu{float:left;width:60%;line-height:36px;background:#333;white-space:nowrap;}
.menu .nav{float:left;position:relative;border-left:1px solid #FFF;}
.subnav{position:absolute;top:36px;left:0px;background:#666;}
.subnav li{line-height:36px;border-bottom:1px solid #fff;}
</style>
3、完整的代码结构
<Doctype html><html>
<head>
<meta charset="utf-8" />
<title>带二级下拉菜单展示</title>
<style type="text/css">
ul,li{margin:0px;padding:0px;list-style:none;}
a{color:#fff;text-decoration:none;}
.menu a{display:block;padding:0px 30px;}
.menu a:hover{background:#da2128;}
.menu{float:left;width:60%;line-height:36px;background:#333;white-space:nowrap;}
.menu .nav{float:left;position:relative;border-left:1px solid #FFF;}
.subnav{position:absolute;top:36px;left:0px;background:#666;}
.subnav li{line-height:36px;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<ul class="menu">
<li class="nav">
<a href="#">网站首页</a>
</li>
<li class="nav">
<a href="#">产品分类</a>
<ul class="subnav">
<li><a href="#">电脑</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">显示器</a></li>
</ul>
</li>
</ul>
</body>
</html>
4、代码展示效果截图
三、代码说明
1、HTML代码中的一级导航li定义了class="nav"，主要用于区分二级导航的li；
2、CSS代码中一级导航的样式中定义了相对定位（position:relative;），不设定任何位置参数值，主要给子代码定位使用；
3、二级导航的绝对定位（position:absolute;），参考对象为一级导航，因为一级导航已经将属性改为定位方式；
4、代码没有指明高度，但标明了行高，所以在二级导航定位的时候给出了top:36px;left:0px;，目的是为了控制二级导航显示在一级导航的正下方；
5、A标签默认没有宽高，为了显示鼠标经过效果，在这里特意定义了A的属性为display:block;，让其能同父层级一样的宽度和高度。
四、特别提示
1、一级导航的li里面CSS一定要有相对定位，否则二级导航的绝对定位就无法控制；
2、二级导航里给出的绝对定位，是参考一级导航，所以只需要计算一级导航的高度即可；
3、一级导航的class="nav"，不能不定义，也不能给二级导航，否则就会相互影响。
热心网友
时间：2022-04-06 15:12
你那里没有上代码，不知道你怎么写的，我这给你个例子吧
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>test</title>
<style type="text/css">
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}
.nav li li a {display:inline-block;}
.nav li li a {display:block;}
.nav ul {list-style-type:none;margin:0;padding:0;}
.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;padding:0;margin:0;width:120px;}
.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
.nav ul table {width:100%;border-collapse:collapse;border:0;padding:0;margin:0;}
.nav ul li ul {display:none;}
.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}
.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:100%;}
.nav ul ul li {display:block;width:100%;border:none;}
.nav ul ul li a{display:block;color:blue;border:none;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">菜单一
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">菜单二
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">菜单三
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">菜单四
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
