关于UL和LI的css问题

lt_124 2009-12-24 09:06:11

<html>
<head>
<style type="text/css">
.nav{ width:980px; height:32px; margin:0 auto; position: relative;z-index: 100; }
.nav ul{ padding-left:10px; }
.nav ul ul{ padding-left:0px; border:1px solid #CCC; }
.nav li { float: left;position: relative;}
.nav ul ul { visibility: hidden;position: absolute;left: 0px;top: 32px;list-style-type: none}
.nav table {position: absolute;top: 0;left: 0;}
.nav ul li:hover ul,
.nav ul a:hover ul{visibility: visible;}

.nav a{display: block; width:90px; height:32px; line-height:32px; text-align:center;
color: #003366;text-decoration: none; font-weight:bold;}
.nav a:hover{ color: #990000; text-decoration:none; }

.nav ul ul li {clear:both;text-align:left; font-size:12px; }

.nav ul ul li a{display: block; width:100px;height:22px; line-height:22px;font-weight:normal;
text-align:left; padding-left:10px; background-color:#F9F9F9;border:2px solid #F9F9F9; }
.nav ul ul li a:hover{ border:2px solid #F9F9F9; background: #003366; color:#EEE; }
}
</style>
</head>

<body>
<div class="nav">
<ul>
<li>
<a href="javascript::void(0)">案例管理</a>

<ul>
<li><a href="__APP__/Case/add">添加网站案例</a></li>
<li><a href="__APP__/Case">网站案例</a></li>
</ul>

</li>
</ul>
</div>
</body>

</html>
我要的效果是鼠标移到案例管理的时候，下面的子档是水平排列，而不是垂直排列，谁帮我一下解决一下。。谢谢。。

...全文

1523 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

lt_124 2009-12-26

打赏
举报

tobbydong的方法确实不支持IE。而下面那位兄弟natici的在IE下直接不显示后面的。。。

算了，我用其它的办法实现了。。不过还是谢谢各位。。

一品梅 2009-12-25

打赏
举报

float:left;

natici 2009-12-25

打赏
举报

<li class="fl"> <a href="__APP__/Case/add">添加网站案例 </a> </li>

<li class="fl"> <a href="__APP__/Case">网站案例 </a> </li> <div class="cf"></div>



.fl{

    float:left;

}

.cf{

    clear:both;

}

tobbydong 2009-12-25

打赏
举报

<html>
<head>
<style type="text/css">
.nav{ width:980px; height:32px; margin:0 auto; position: relative;z-index: 100; }
.nav ul{ padding-left:10px;}
.nav ul ul{padding-left:0px;border:1px solid #CCC; }
.nav ul ul { visibility: hidden; left: 0px;top: 32px; position:absolute; list-style-type:none }
.nav table {position: absolute;top: 0;left: 0;}

.nav a{display: block; width:90px; height:32px; line-height:32px; text-align:center;
color: #003366;text-decoration: none; font-weight:bold;}
.nav a:hover{ color: #990000; text-decoration:none; }

.nav ul ul li { text-align:left; font-size:12px; float:left; }

.nav ul ul li a{display: block; width:100px;height:22px; line-height:22px;font-weight:normal;
text-align:center; background-color:#F9F9F9;border:2px solid #F9F9F9; }
.nav ul ul li a:hover{ border:2px solid #F9F9F9; background: #003366; color:#EEE; }

</style>
</head>

<body>
<div class="nav">
<ul>
<li onMouseOver="javascript:document.getElementById('sss').style.visibility='visible'"onMouseOut="javascript:document.getElementById('sss').style.visibility='hidden'">
<a href="">案例管理  </a> 

<ul id="sss">
<li> <a href="__APP__/Case/add">添加网站案例 </a> </li>
<li> <a href="__APP__/Case">网站案例 </a> </li>
</ul>

</li>
</ul>
</div>
</body>

</html>
是这样效果吗？
你的貌似不支持IE，加了句js