为了账号安全,请及时绑定邮箱和手机立即绑定

为什么当二级菜单栏目名字很长时我的li不会边长而是另起一行呢??


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<style type="text/css">

*{ margin:0px; padding:0px;}

 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}

 ul{ list-style:none;}

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

 a{ text-decoration:none; color:#000; display:block; width:90px;}

 a:hover{ color:#FFF; background-color:#666;}

 ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 

 ul li ul{width:90px; position:absolute;  display:none; }

 ul li:hover ul{display:block;}

</style>

<body>

<div id="menu">

<ul>

<li><a href="#">首页</a>

</li>

<li><a href="#">关于我们</a>

<ul>

<li><a href="#">公司简介公司简介</a></li>

<li><a href="#">荣誉资质</a></li>

</ul>

</li>

<li><a href="#">新闻中心</a>

<!--<ul>

<li><a href="#">公司简介</a></li>

<li><a href="#">荣誉资质</a></li>

</ul>-->

</li>

<li><a href="#">厂容厂貌</a>

<!--<ul>

<li><a href="#">公司简介</a></li>

<li><a href="#">荣誉资质</a></li>

</ul>-->

</li>

<li><a href="#">在线留言</a>

<!--<ul>

<li><a href="#">公司简介</a></li>

<li><a href="#">荣誉资质</a></li>

</ul>-->

</li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</body>

</html>

http://img1.sycdn.imooc.com//599edcce0001c2f508960313.jpg

正在回答

1 回答

 ul li ul{width:90px; position:absolute;  display:none; }  因为你设置了宽度90px

0 回复 有任何疑惑可以回复我~
#1

leeu 提问者

为什么我删除了还是会换行,第二级的ul宽度貌似被第一级的li宽度限制住了,请问你知道怎么回事吗?
2017-08-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106999    人
  • 解答问题       542    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

为什么当二级菜单栏目名字很长时我的li不会边长而是另起一行呢??

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信