DIV+CSS实现二级下拉菜单
符合web标准的纯div+css制作的二级下拉菜单特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING V ALIDATING MENU</title><style type="text/css">/* common styling *//* set up the overall width of the menu div, the font and the margins */.menu {font-family: arial, sans-serif;width:750px;margin:0;margin:50px 0;}/* remove the bullets and set the margin and padding to zero for the unordered list */.menu ul {padding:0;margin:0;list-style-type: none;}/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */.menu ul li {float:left;position:relative;}/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */.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;}/* make the dropdown ul invisible */.menu ul li ul {display: none;}/* specific to non IE browsers *//* set the background and foreground color of the main menu li on hover */.menu ul li:hover a {color:#fff;background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li:hover ul {display:block;position:absolute;top:31px;left:0;width:105px;}/* style the background and foreground color of the submenu links */.menu ul li:hover ul li a {display:block;background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li:hover ul li a:hover {background:#dfc184;color:#000;}</style><!--[if lte IE 6]><style type="text/css">/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */table {border-collapse:collapse;margin:0;padding:0;}/* ignore the link used by 'other browsers' */.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}/* set the background and foreground color of the main menu link on hover */.menu ul li a:hover {color:#fff;background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li a:hover ul {display:block;position:absolute;top:32px;left:0;width:105px;}/* style the background and foreground color of the submenu links */.menu ul li a:hover ul li a {background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.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="../menu/index.html">DEMOS</a><!--[if lte IE 6]><a href="../menu/index.html">DEMOS<table><tr><td><![endif]--><ul><li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li><li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li><li><a href="../menu/form.html" title="Styling forms">styled form</a></li><li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li><li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li><li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li><li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="index.html">MENUS</a><!--[if lte IE 6]><a href="index.html">MENUS<table><tr><td><![endif]--><ul><li><a href="spies.html" title="a coded list of spies">spies menu</a></li><li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><li><a href="circles.html" title="circular links">circular links</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><!--[if lte IE 6]><a href="../layouts/index.html">LAYOUTS<table><tr><td><![endif]--><ul><li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../boxes/index.html">BOXES</a><!--[if lte IE 6]><a href="../boxes/index.html">BOXES<table><tr><td><![endif]--><ul><li><a href="spies.html" title="a coded list of spies">spies menu</a></li><li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><li><a href="circles.html" title="circular links">circular links</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><!--[if lte IE 6]><a href="../mozilla/index.html">MOZILLA<table><tr><td><![endif]--><ul><li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li><li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li><li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li><li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li><li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li><li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../ie/index.html">EXPLORER</a><!--[if lte IE 6]><a href="../ie/index.html">EXPLORER<table><tr><td><![endif]--><ul><li><a href="../ie/exampleone.html" title="Example one">example one</a></li><li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li><li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../opacity/index.html">OPACITY</a><!--[if lte IE 6]><a href="../opacity/index.html">OPACITY<table><tr><td><![endif]--><ul><li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li><li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li><li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li><li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><!-- clear the floats if required --><div class="clear"> </div></div></body></html>。
JS实现导航菜单中的二级下拉菜单的几种方式
JS实现导航菜单中的⼆级下拉菜单的⼏种⽅式最近整理了， JS 实现导航菜单中的⼆级下拉菜单的三种⽅式，便于项⽬中应⽤。
如何实现导航菜单栏中的⼆级下拉菜单？ 我们在淘宝、搜狐等⼤型⽹站上都可以看到使⽤的⼀些⼆级下拉菜单，⽐如下⾯这张图⽚。
但是如何实现类似的图⽚呢？实际上，我们有⾄少三种⽅式来实现，下⾯，我附上代码供⼤家参考。
1.仅使⽤html和css<meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;list-style: none;text-decoration: none;}#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}ul{background: #aaa}ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}ul li:hover{background: #cea;}ul li ul li{float: none;}/*关键⼀：将⼆级菜单设置为display：none;*/ul li ul{position: absolute;top:40px;left: 0; display: none;}ul li ul li:hover{background: red;}/*关键⼆：在划过⼆级菜单从属的⼀级菜单时，设置为display:block;*/ul li:hover ul{display: block;}</style><div id="nav"><ul><li><a href="">⾸页</a></li><li><a href="">汽车</a><ul><li><a href="#">奥迪</a> </li><li><a href="#">道奇</a> </li></ul></li><li><a href="">⼿机</a><ul><li><a href="#">⼩⽶</a> </li><li><a href="#">华为</a> </li></ul></li><li><a href="">联系我们</a></li></ul></div> 我们可以看到，这种⽅法是⽐较好的，它保证了结构与表现的完全分离。
CSS+div下拉菜单(js)
CSS+div:下拉菜单详解之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用DW做了一个，无代码亲自操作经历），今天终于抽出时间做了一个下拉菜单，IE6、IE7、/FF 下通用不变形，其实这个很基础，但对于往标准化转变有很好的促进作用。
先把关键点和思路摘录一下：1、结构布局：在菜单版块上，下拉的菜单也是放在UL中，但必需要嵌套在其父级的LI中，如下<div id=”nav”><ul id=”nav_top”><li id=”nav_index”><a href=”/”>首页</a></li><li><a href=”#”>CSS专栏</a><ul><li><a href=”#”>CSS基础</a></li><li><a href=”#”>CSS常用代码</a></li><li><a href=”#”>CSS高级技术</a></li></ul></li>… …</div>在这样的结构中，上层的DIV等标签不能用overflow:hidden; ，否则下拉菜单会出不来。
我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠的是JS，有时定位不准会产生下拉菜单跑位。
而这样嵌套后，一会通过定位，就不会偏移。
在实际应用时，nav可以加入LOGO 等内容，而nav_top才是用于控制菜单。
2、样式继承：由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不管这个，最后再去修正下拉部分的UL和LI。
纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能。。。
纯css实现⼆级导航菜单效果,通过简单的⿏标事件操作页⾯元素样式变换实现⼆级导航菜单的功能。
HTML代码如下<!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt><a class="first" href="#" >⾸页</a></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="ty"><dt><a href="#">特约</a><ul><li class="tip"><a href="#" >签约请求</a></li><li><a href="#" >签约服务</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="bx"><dt><a href="#">保险</a><ul><li class="tip"><a href="#" >保险信息</a></li><li><a href="#" >新员投保</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="dd"><dt><a href="#">订单</a><ul><li class="tip"><a href="#" >订单管理</a></li><li><a href="#" >评价管理</a></li><li><a href="#" >维修记录</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="dp"><dt><a href="#">店铺</a><ul><li class="tip"><a href="#" >店铺设置</a></li><li><a href="#" >店铺信息</a></li><li><a href="#" >维修分类</a></li><li><a href="#" >维修品牌</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="fw"><dt><a href="#">服务</a><ul><li class="tip"><a href="#" >投诉管理</a></li> <li><a href="#" >退约记录</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="hf"><dt><a href="#">会费</a><ul><li class="tip"><a href="#" >年费/保证⾦</a></li> <li><a href="#" >店铺续约</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="zp"><dt><a href="#">招聘</a><ul><li class="tip"><a href="#" >招聘信息</a></li> </ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="tj"><dt><a href="#">统计</a><ul><li class="tip"><a href="#" >流量统计</a></li> <li><a href="#" >销售统计</a></li><li><a href="#" >⾏业分析</a></li></ul></dt><dd class="triangle"></dd></dl></div><!-- 头部导航栏结束 --><style>#nav{float:left;margin-left:10px;margin-top:20px;}#nav dl{float:left;font-size:14px;padding-left:5px;position:relative;}#nav dt{float:left;display:block;width:48px;height:auto;text-align: center;line-height:30px;}#nav dt a{color:#999999;}#nav dl .first{color:#fff;font-weight:bold;}#nav .line{float:left;margin-top:6px;margin-left:4px;}#nav .triangle{display:none;background:url(../images/l_bgs_img.png);width:21px;height:13px;background-position:-256px -11px;position:relative;top:41px;left:14px;}#nav dt:hover{background:#fff;}#nav dt:hover a{color:#000;}#nav ul{display:none;width:auto;min-width:90px;height:auto;/*outline: 1px solid #000;*/border:1px solid #000;border-top:0;position:absolute;left:4px;z-index:2;}#nav ul .tip{margin-top:10px;}#nav li{width:auto;margin:6px 4px;}#nav li:hover{background:#555555;}#nav li:hover a{color:#fff;}#nav dt:hover ul{display:block;background:#fff;}</style>有⼀个⽹站的导航栏给我的印象不错,于是就把⽹页保存下来想研究⼀下它的js代码，没想到的是竟然是⽤.NET的⾃定义控件⽣成的！上⾯的代码差点没把我看晕过去！（有兴趣的话可以试⼀试哦，⾥⾯N多变量的～～～汗），还好⼤三时学过c＃（垃圾）加上它的控件可以试⽤，就下下来⽤了，感觉还真的不错，简单易⽤，可是～测试的时候差点没昏了！NND试⽤版的竟然只能再本机测试，别⼈的PC访问不但显⽰不了⽹页还警告说要注册购买⼤哥的竟然还要$（本少爷每⽉实习补助才1千￥啊），⼀怒之下决定⾃⼰封装⼀个。
经典DIV+CSS下拉菜单
<ul id="nav"><li><a href="/">div+css</a><ul><li><a href="/">CSS</a></li><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="/rumen/">css入门</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><li><a href="#">入门二</a></li></ul></li><li><a href="/html/">HTML基础</a> <ul><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="/jiqiao/">DIV+CSS技巧</a><ul><li><a href="#">技巧四</a></li><li><a href="#">技巧四</a></li><li><a href="#">技巧四</a></li><li><a href="#">技巧四111</a></li></ul></li><li><a href="/template/">DIV+CSS模板</a><ul><li><a href="/template/">CSS模板</a></li><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><li><a href="#">模板模板</a></li><li><a href="#">模板模板模板模板</a></li></ul></li><li><a href="/shouce/">CSS手册</a><ul><li><a href="/shouce/">DIV+CSS手册</a></li> <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><li><a href="#">手册手册手册</a></li></ul></li></ul><style type="text/css"><!--/* CSS下拉菜单实例*/*{margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; font-size:12px;}#nav {line-height: 24px; list-style-type: none; background:#666;}#nav a {display: block; width: 80px; text-align:center;}#nav a:link {color:#666; text-decoration:none;}#nav a:visited {color:#666;text-decoration:none;}#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}#nav li {float: left; width: 80px; background:#CCC;}#nav li a:hover{ background:#999;}#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}#nav li ul li{float: left; width: 180px;background:#EFEFEF;}#nav li ul a{display: block; width: 156px;text-align:left;padding-left:24px; overflow:hidden;}#nav li ul a:link {color:#666; text-decoration:none;}#nav li ul a:visited {color:#666;text-decoration:none;}#nav li ul a:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left;}--></style><script type=text/javascript>function menuFix() {var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");}}}window.onload=menuFix;</script>。
CSS二级菜单
CSS⼆级菜单0.需求：当⿏标hover到按钮上时，出现下拉菜单导航条。
1.问题拆解：（1）HTML应该如何组织⽐较⽅便合理因为题中要求下拉菜单位于按钮的正下⽅，可以使⽤列表<li>中嵌套⽆序列表<ul>的⽅式，设置<ul>padding值为0。
（2）如何实现下拉菜单在⿏标没有hover到按钮上时不出现使⽤定位隐藏，设置下拉菜单为绝对定位，设置⼀个负的很⼤的值。
（3）如何实现下拉菜单在⿏标hover时出现设置⿏标hover时，<ul>列表的left值。
<body><li class="btn"><a class="btn1" href="#">按钮</a><ul><li><a href="#">下拉菜单项</a></li><li><a href="#">下拉菜单项</a></li><li><a href="#">下拉菜单项</a></li><li><a class="last" href="#">下拉菜单项</a></li></ul></li></body>（1）⾸先重置默认的<li>,<a>标签样式li,li a {text-decoration: none;list-style-type: none;font-family: "宋体";font-size: 12px;color: #000;}（2）设置按钮的边框等，此时我设置的是外层<li>标签中<a>标签的样式，此时将内层<a>标签设置成块级block，这样可以设置宽⾼，并且后⾯有⽤（后⾯再说）。
下拉及多级弹出菜单
今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单，包含以下内容和知识点：带下拉子菜单的导航菜单绝对定位和浮动的区别和运用css自适应宽度滑动门菜单一、带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛，它存在使用方便，占用空间小等特点。
之前纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横向而已，下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。
先在html代码增加二级菜单的代码：<div id="menu"><ul><li><a id="current" href="#">首页</a></li><li><a href="#">网页版式</a><ul><li><a href="#">自适应宽度</a></li><li><a href="#">固定宽度</a></li></ul></li><li><a href="#">web教程</a><ul><li><a href="#">新手入门</a></li><li><a href="#">视频教程</a></li><li><a href="#">常见问题</a></li></ul></li><li><a href="#">web实例</a></li><li><a href="#">常用代码</a></li></ul></div>增加完代码后，在浏览器里预览一下：是不是一看头都大了，怎么变成这样了。
垂直二级导航菜单用div+CSS架构实例
垂直二级导航菜单用div+CSS架构实例导航的结构导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护，注意要避免现有浏览器的不兼容。
解决方案下面是导航的HTML和CSS的代码,效果如图.这是创建导航的HTML代码=========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="listnav1.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>============================使用CSS给上面代码添加效果=====================#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}======================分析:先创建一个无序列表的导航条,并做好导航链接. ========================<ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul>========================然后用一个div把这个无序列表包含起来.===========================<div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>==============================在浏览器中显示默认的样式.接下来我们要做的第一件事是给这个div定义宽度. ===================#navigation {width: 200px;}=====================给列表添加样式,去掉默认的圆点和清除填充.========================#navigation ul {list-style: none;margin: 0;padding: 0;}========================在浏览器中显示:给li标签添加一个下划线==========================#navigation li {border-bottom: 1px solid #ED9F9F;}==============================给链接添加样式:===============================#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515; background-color: #B51032;color: #FFFFFF;text-decoration: none;}=============================在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.使用CSS创建一个没有图像和javascript的导航导航功能常常具有翻转的效果:比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.解决方案：使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
二级下拉菜单实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type=text/javascript>
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
</script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:700px; height:38px; margin:0 auto; background:url(/Templates/show/images/menu_bg.jpg) ;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:91px; height:38px; line-height:38px; text-align:center; font-size:14px; color:#FFFFFF; text-decoration:none; font-weight:bold;}
#menu ul li a:hover { background:url(/Templates/show/images/Menu_link.jpg);display:block; width:91px; height:38px; line-height:38px; text-align:center; font-size:14px; color:#FF9966; text-decoration:none; font-weight:bold;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:88spx; background:#99CC99; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</li>
<li><a href="#">新闻动态</a>
<ul>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">社会新闻</a></li>
</ul>
</li>
<li><a href="#">产品展示</a></li>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
<li><a href="#">产品四</a></li>
</ul>
<li><a href="#">人力资源</a></li>
<li><a href="#">客户中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div> </body> </html>。