下面先是Style css的代码。只是修改和增加了部分css,对有些浏览器的不兼容,我做了重新的定位
View css
<style type="text/css">
*{
margin:0px; padding:0px;}/*将所有标签的默认边距等全置为零*/
#posi{ /*这个是我们新增的一个div,用来将所有的ul li包起来,对导航条的绝对定位,只要是方便移动*/
position:absolute;
top:60px;
left:60px;
width:60px;}
#main_daohang_left li{width:60px;
background-Color:red;}
#main_daohang_left li a,#main_daohang_left li ul li a{
text-decoration:none;}
#main_daohang_left li ul li{
padding-bottom:5px;
padding-top:5px;
vertical-align:middle;
}
#main_daohang_left li,#main_daohang_left li ul li{
list-style:none;}
#main_daohang_left li div{
display:none;}
#main_daohang_left li#menu:hover div{
display:block;
}
#main_daohang_left li ul li:hover{
background-color:#DA937D;}
#main_daohang_left li ul,#main_daohang_left li ul li{
width:60px;
background-color:#487EB5;}
#menulist{ /*对下列菜单,我们新加了一个div*,对它进行相对定位*/
position:relative;
padding:0px;
margin:0px;
left:0px;
top:0px;}
</style>
*{
margin:0px; padding:0px;}/*将所有标签的默认边距等全置为零*/
#posi{ /*这个是我们新增的一个div,用来将所有的ul li包起来,对导航条的绝对定位,只要是方便移动*/
position:absolute;
top:60px;
left:60px;
width:60px;}
#main_daohang_left li{width:60px;
background-Color:red;}
#main_daohang_left li a,#main_daohang_left li ul li a{
text-decoration:none;}
#main_daohang_left li ul li{
padding-bottom:5px;
padding-top:5px;
vertical-align:middle;
}
#main_daohang_left li,#main_daohang_left li ul li{
list-style:none;}
#main_daohang_left li div{
display:none;}
#main_daohang_left li#menu:hover div{
display:block;
}
#main_daohang_left li ul li:hover{
background-color:#DA937D;}
#main_daohang_left li ul,#main_daohang_left li ul li{
width:60px;
background-color:#487EB5;}
#menulist{ /*对下列菜单,我们新加了一个div*,对它进行相对定位*/
position:relative;
padding:0px;
margin:0px;
left:0px;
top:0px;}
</style>
下面是html代码,只要是新增了两个div,用于位置的操作方便
View html
<div id="posi">
<ul id="main_daohang_left">
<li id="menu"><a href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项</span></a>
<!--此处为菜单项-->
<div id="menulist">
<ul>
<li><a href="#">第1行</a></li>
<li><a href="#">第2行</a></li>
<li><a href="#">第3行</a></li>
<li><a href="#">第4行</a></li>
</ul>
</div>
</li>
</ul>
</div>
<ul id="main_daohang_left">
<li id="menu"><a href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项</span></a>
<!--此处为菜单项-->
<div id="menulist">
<ul>
<li><a href="#">第1行</a></li>
<li><a href="#">第2行</a></li>
<li><a href="#">第3行</a></li>
<li><a href="#">第4行</a></li>
</ul>
</div>
</li>
</ul>
</div>
如果大家有什么不兼容的,欢迎大家来讨论,我们一起来研究一下吧,谢谢了。
<style type="text/css">