zoukankan      html  css  js  c++  java
  • 针对 “一个非常简单易用而且兼容非常好的下拉菜单” 的随笔对部分浏览器不兼容的修改

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

      


      



















     





      

      



     
       







  • 相关阅读:
    MyBatis之三:多表联合查询
    MyBatis之二:简单增删改查
    MyBatis之一:入门
    如何用Maven创建web项目(具体步骤)
    Maven3.2创建webapp项目过程中问题以及解决方案
    纯前端下载数据Excel文档
    centos7 yum无法正常工作
    Element ui table selection 分页支持保存已经选中的数据,同时支持随时删除选中的数据,并设置默认选择
    删除排序数组中的重复选项
    列表数据(包含父节点关系)转化为树形结构
  • 原文地址:https://www.cnblogs.com/wanlxz/p/2477674.html
Copyright © 2011-2022 走看看