CSS+JS下拉菜单和纯CSS下拉菜单

下拉菜单

（思路：先把二级定位到屏幕外，鼠标悬停重新定位回来；另一个就是ul浮动，li也浮动）

下拉菜单的一般思路就是把子导航嵌套在无序列表中，把列表定位到屏幕之外，当鼠标悬停在其父列表项上时，重新定位它。

有两个问题需要注意，

第一个问题，列表项设置了float浮动，因此列表也要浮动已防止列表收缩：

ul.nav,ul.nav ul{float:left}

ul.nav li{float:left}

第二个问题，子导航的定位

ul.nav li ul{position:absolute;left:-999em}

ul.nav li:hover ul{left:auto}

一、CSS+JS下拉菜单

原理：一级菜单的li中包含二级菜单ul。在鼠标没有移上去时，二级菜单的ul是display：none的状态，鼠标一移上去变成display：block。改变这个display属性值是通过JS来实现。鼠标hover时，把整个二级菜单的ul给display出来，用到的事件onmouseonver。鼠标移出又把整个二级菜单的ul 给隐藏掉。

nav-js.html文件

<!DOCTYPE html >

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>

<link href="nav-js.css" rel="stylesheet">

<script type="text/javascript">

    //显示子菜单

    function showSubMenu(li){

        var subMenu = li.getElementsByTagName("ul")[0];

        subMenu.style.display = "block";

    }

    //隐藏子菜单

    function hideSubMenu(li){

        var subMenu = li.getElementsByTagName("ul")[0];

        subMenu.style.display = "none";

    }

</script>

</head>

<body>

    <ul id="navigation">

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

        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的服务</a>

            <ul>

                <li><a href="#">服务一</a></li>

                <li><a href="#">服务二</a></li>

                <li><a href="#">服务三</a></li>

                <li><a href="#">服务四</a></li>

                <li><a href="#">服务五</a></li>

            </ul>

        </li>

        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的团队</a>

            <ul>

                <li><a href="#">服务一</a></li>

                <li><a href="#">服务二</a></li>

                <li><a href="#">服务三</a></li>

                <li><a href="#">服务四</a></li>

                <li><a href="#">服务五</a></li>

            </ul>

        </li>

        <li><a href="#">我们的方向</a></li>

        <li><a href="#">关于我们</a></li>

    </ul>

</body>

</html>

nav-css.css文件

 @charset "UTF-8";

  *{

      margin:;

      padding:;

  }

 body{

     font-size: 14px;

     font-family: sans-serif;

 }

 #navigation,#navigation li ul{

     list-style-type: none;

 }

 #navigation li{

     float: left;

     text-align: center;

     position: relative;

 }

 #navigation li a:link,#navigation li a:visited{

     display: block;

     text-decoration: none;

     color: #000;

     width: 120px;

     height: 40px;

     line-height: 40px;

     border: 1px solid #fff;

     background: #c5dbf2;

     border-width: 1px 1px 0 0;

 }

 #navigation li a:hover{

     color: #fff;

     background: #2687eb;

 }

 #navigation li ul li{

     float: none;

 }

 #navigation li ul{

     display: none;

     position: absolute;       /*二级ul使用绝对定位，宽度大于一级菜单时，才不会撑大一级*/

 

 }

 #navigation li ul li a:link,#navigation li ul li a:visited{

     display: block;

     width: 160px;

 }

在46行，如果一级li的宽度小于二级li的宽度，那么就会撑大一级li的宽度，如图：

显示和隐藏二级UL的JS函数：

//显示子菜单

    function showSubMenu(li){

        var subMenu = li.getElementsByTagName("ul")[0];                  /*传了一个参数li进来，表示当前鼠标经过的li，
                                                                         再通过查找当前li下面的第一个ul，注意数组从0开始*/

        subMenu.style.display = "block";

    }

    //隐藏子菜单

    function hideSubMenu(li){

        var subMenu = li.getElementsByTagName("ul")[0];

        subMenu.style.display = "none";

    }

做到了兼容所有的主流浏览器。

二、纯CSS实现的下拉菜单

纯CSS写的下拉菜单，其他浏览器都可以兼容，唯独IE6这家伙不怎么听话不兼容，所以当时IE6时，采用table布局，来达到IE6兼容的目的。

HTML文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>纯css下拉菜单，兼容IE6</title>

        <link rel="stylesheet" type="text/css" href="nav-css3.css">

<!--[if lte IE 6]>

<style tpye="text/css">

table{

    border-collapse: collapse;

    margin: 0;

    padding: 0;

}

.menu ul li a.hide,.menu ul li a:visited.hide{

    display: none;

}

.menu ul li a:hover{

    color:#fff;

    background: #b3ab79;

}

.menu ul li a:hover ul{

    display: block;

    position: absolute;

    top: 32px;

    left: 0;

    width: 105px;

}

.menu ul li a:hover ul li a{

    background: #faeec7;

    color: #000;

    width:160px;

}

.menu ul li a:hover ul li a:hover{

    background: #dfc184;

    color: #000;

}

</style>

<![endif]-->

    </head>

    <body>

        <div class="menu">

            <ul>

                <li><a class="hide" href="#">我们的服务</a>

                    <!--[if lte IE 6]>

                    <a href="#">我们的服务

                    <table><tr><td>

                    <![endif]-->

                    <ul>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                    </ul>

                    <!--[if lte IE 6]>

                    </td></tr></table>

                    </a>

                    <![endif]-->

                </li>

                <li><a class="hide" href="#">我们的服务</a>

                    <!--[if lte IE 6]>

                    <a href="#">我们的服务

                    <table><tr><td>

                    <![endif]-->

                    <ul>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                    </ul>

                    <!--[if lte IE 6]>

                    </td></tr></table>

                    </a>

                    <![endif]-->

                </li>

                <li><a class="hide" href="#">我们的服务</a>

                    <!--[if lte IE 6]>

                    <a href="#">我们的服务

                    <table><tr><td>

                    <![endif]-->

                    <ul>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                        <li><a href="#">服务一</a></li>

                    </ul>

                    <!--[if lte IE 6]>

                    </td></tr></table>

                    </a>

                    <![endif]-->

                </li>

            </ul>

        </div>

    </body>

</html>

CSS文件

*{

    margin:;

    padding:;

}

.menu{

    font-family: arial,sans-serif;

    font-size: 14px;

    width: 750px;

}

.menu ul{

    padding:;

    margin:;

    list-style-type: none;

}

.menu ul li{

    float: left;

    position: relative;

}

.menu ul li a, .menu ul li a:visited{

    display: block;

    text-align: center;

    text-decoration: none;

    width: 104px;

    height: 30px;

    color: #000;

    border: 1px solid #fff;

    border-width: 1px 1px 0 0;

    background: #c9c9a7;

    line-height: 30px;

    font-size: 11px;

}

/*隐藏二级菜单ul*/

.menu ul li ul{

    display: none;

}/*隐藏结束*/

.menu ul li:hover a{                  /*????????????尝试修改此处*/

    color: #fff;

    background: #b3ab79;

}

/*显示二级菜单*/

.menu ul li:hover ul{

    display: block;

    position: absolute;

    top: 31px;

    left: 0px;

    width: 105px;

}/*结束*/

/*添加二级菜单鼠标移过的样式*/

.menu ul li:hover ul li a{

    display: block;

    background: #faeec7;

    color: #000;

    width: 160px;

}

.menu ul li:hover ul li a:hover{

    background: #dfc184;

    color: #000;

}

ok，这样IE6也达到兼容。

CSS+JS下拉菜单和纯CSS下拉菜单的更多相关文章

CSS+JS实现兼容性很好的无限级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
不要再纠结css/js/html有没有必要放在WEB-INF下了
原因首先,css/js/html没有必要放在WEB-INF下. 最终这些会被原封不动的展现在客户端,所以访问安全根本就不会成为问题. jsp放在web-inf下,原因主要有两个 1. 远古时代的模式 ...
谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
CSS学习笔记（8）--纯CSS绘制三角形（各种角度）
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
Django使用本地css/js文件
Django使用本地css/js文件在manager.py同层级下创建static文件夹, 里面放上css , js, images等文件或者文件夹我的文件夹层级然后只需在settings.py ...
HTML+CSS+JS基础知识
HTML+CSS+JS基础知识目录对HTML+CSS+JS的理解基础知识对HTML+CSS+JS的理解基础知识插入样式表的三种方式外部样式表:<link rel="sty ...
突破css选择器的局限，实现一个css地址选择器?
首先看一个效果,注意地址栏的变化然后思考一下,用css如何实现? css选择器的局限选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如元素选择器 p {color ...
谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

Android使用adb工具及root权限完成手机抓包
1.环境准备/注意: 手机要求已经root. 首先需要配置JDK环境变量,这里主要讲解抓包,JDK环境变量配置跳过. 将包内附带的adb.zip解压到C盘根目录. 整个操作过程都需要用手机用数据线连 ...
swift swizzle
SWIZZLE 由王巍 (@ONEVCAT) 发布于 2015/09/30 Swizzle 是 Objective-C 运行时的黑魔法之一.我们可以通过 Swizzle 的手段,在运行时对某些方法的 ...
服务器慢 mysql-bin.000001文件占满磁盘的原因与解决
发现 VPS 服务器上的网站反应超级慢,简单的重启.重启各主要服务,发现mysql 的反应极其不正常. 一方面是问题,这与站点访问量有关.开始时从mysql 的配置文件 my.cnf 考虑,但志文工作 ...
VS2012 独占编辑设置
用VS2008建立的项目就有(禁止其他用户签出和签入) 为什么VS2012的项目就没有了呢??(管理员说他什么都没设置)VS2012: 两个项目同样是用VS2012打开的,而第一个是用VS2008创建 ...
类集对enum的支持。
1,EmumMap public class EnumMap<K extends Enum<K>,V>extends AbstractMap<K,V>impleme ...
移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览
先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经 ...
2D image convolution
在学习cnn的过程中,对convolution的概念真的很是模糊,本来在学习图像处理的过程中,已对convolution有所了解,它与correlation是有不同的,因为convolution = ...
sharepoint 2013 设置显示详细错误信息
1. 在当前网站端口目录下的Web.config修改例如80端口的站点路径为:C:\inetpub\wwwroot\wss\VirtualDirectories\80 (1)将<customE ...
得到bundle seed id
- (NSString *)bundleSeedID { NSDictionary *query = [NSDictionary dictionaryWithObjectsAndKeys: (__br ...
Visual Studio快捷键小结
工欲善其事必先利其器,这句话相信大家都听说过.利其器,就是我们先得有个神器,神器就是VS(号称宇宙第一IDE),有了神奇不会用也是白搭,就像你有了倚天剑和屠龙刀你不会使,它也就是废铁(假设它们是铁做的 ...

CSS+JS下拉菜单和纯CSS下拉菜单

下拉菜单

CSS+JS下拉菜单和纯CSS下拉菜单的更多相关文章

随机推荐

热门专题