CSS样式消失了,怎么回事?

html-css0133

CSS样式消失了,怎么回事?,第1张

按照你的说法,如果消失了,有3种情况

一,设定了display:none你检查下

二,层被挡住了,你看看是否设置了 position:absoluteleft:0right:0之类的

三,float的问题,就是把层给浮上去了。导致你的层会重叠。一般多加一行<br style="clear:both" />解决问题。

希望我的建议对你有用。

<html>

<head>

<style type="text/css">

body{

background-color:white

font-size:12px

font-family:Arial, Helvetica, sans-serif

margin:0px

padding:0px

color:white

}

ul,li{

margin:0px

padding:0px

}

li{

display:inline

list-style:none

list-style-position:outside

text-align:center

font-weight:bold

float:left

}

a:link{

color:#336601

text-decoration:none

float:left

width:100px

padding:3px 5px 0px 5px

}

a:visited{

color:#336601

text-decoration:none

float:left

padding:3px 5px 0px 5px

width:100px

}

a:hover{

color:white

float:left

padding:3px 3px 0px 20px

width:88px

text-decoration:none

background-color:#539D26

}

a:active{

color:white

float:left

padding:3px 3px 0px 20px

width:88px

text-decoration:none

background-color:#BD06B4

}

#nav{

width:600px

height:30px

border-bottom:0px

padding:0px 5px

position:absolute

z-index:1

left: 198px

top: 25px

}

.list{

line-height:20px

text-align:left

padding:4px

font-weight:normal

}

.menu1{

width:120px

height:auto

margin:6px 4px 0px 0px

border:1px solid #9CDD75

background-color:#F1FBEC

color:#336601

padding:6px 0px 0px 0px

cursor:hand

overflow-y:hidden

filter:Alpha(opacity=70)

-moz-opacity:0.7

}

.menu2{

width:120px

height:20px

line-height:20px

margin:6px 4px 0px 0px

background-color:#F5F5F5

color:#999999

border:1px solid #EEE8DD

overflow-y:hidden

cursor:hand

}

</style>

</head>

<body>

<div id="nav">

<ul>

<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">首页

<div class="list">

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

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">社区

<div class="list">

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

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">生活

<div class="list">

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

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">论坛

<div class="list">

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

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

</ul>

</div>

</body>

</html>

试试这个,只是思路不同而已。