针对 “一个非常简单易用而且兼容非常好的下拉菜单” 的随笔对部分浏览器不兼容的修改

下面先是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>

 下面是html代码,只要是新增了两个div,用于位置的操作方便

View html
<div id="posi">
<ul id="main_daohang_left">


               <li id="menu"><href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项</span></a>
                  
                   <!--此处为菜单项-->
                   <div id="menulist">
                                <ul>
                                      <li><href="#">第1行</a></li>
                                      <li><href="#">第2行</a></li>
                                      <li><href="#">第3行</a></li>
                                      <li><href="#">第4行</a></li>
                                </ul>
                           
                    </div>
                  
               </li>
</ul>
</div>

 如果大家有什么不兼容的,欢迎大家来讨论,我们一起来研究一下吧,谢谢了。

<style type="text/css">

  


  



















 





  

  



 
   







原文地址:https://www.cnblogs.com/wanlxz/p/2477674.html