二级菜单自动换行，为什么？

首页课程实战体系课手记专栏慕课教程

<!doctype html>

<html>

<head>

<title>Document</title>

*{margin:0;padding:0;}

#nav{background-color:#66ffff;margin:0 auto;width:600px;height:40px;}

ul{list-style:none;}

ul li{float:left;line-height:40px;text-align:center;position:relative;}

a{text-decoration:none;color:black;display:block;padding:0 10px;}

a:hover{color:white; background:#66ccff;}

ul li ul li{float:none;background:#00ccff;margin:2px 0;}

ul li ul{position:absolute;left:0px;top:40px;display:none;}

ul li ul li a:hover{background-color:#0066cc;}

ul li:hover ul{display:block;}

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

这段代码当中的二级菜单为什么不能先按行显示，在宽度达到首栏ul li的宽度后就自己换行了，为什么？？？？

Balrog

浏览 1858回答 2

快乐的小牛妞

继承的是父级的宽度。。子菜单设定一个宽度值就好了

1 0

李晓健

二级菜单的ul给一个width值就好了，不然的话他默认是父级的宽，所以就自动折行了。

1 0

随时随地看视频慕课网APP