<style type="text/css">
*{ margin:0px; padding:0px;}
#nav{ background-color: #790003; width:100%; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; position:relative;}
a{ text-decoration:none; color: #FFF; font-family:"黑体"; display:block; padding:0 30px; }
a:hover{ color:#fff; background-color:#333;}
ul li ul li{ float:none; background-color:#790003;}
ul li ul { position:absolute; left:0px; height:40px; display:none;}
ul li ul li a:hover{ background-color:#666;}
ul li:hover ul{ display:block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">家居天下</a></li>
<li><a href="#">服务项目</a></li>
<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>
<li><a href="#">最新动态</a></li>
</ul>
</li>
<li><a href="#">装饰风格</a>
<ul>
<li><a href="#">美式乡村</a></li>
<li><a href="#">古典欧式</a></li>
<li><a href="#">地中海式</a></li>
<li><a href="#">东南亚</a></li>
<li><a href="#">日式</a></li>
<li><a href="#">新古典</a></li>
<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>
<li><a href="#">工程案例</a></li>
</ul>
</li>
<li><a href="#">装饰宝典</a>
<ul>
<li><a href="#">设计验收</a></li>
<li><a href="#">施工验收</a></li>
<li><a href="#">材料验收</a></li>
<li><a href="#">环保验收</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
这样如何使所有下拉菜单居中啊
聂斌
2014-10-01
举报
0/150
提交
取消
