纯CSS实现的横向二级导航菜单(无js兼容性强) |
| 2021-01-21 22:05:09 35资源网(www.35d.net) |
| js |
下载本资源原文网址：http://www.daima.org/js/js13387.html 纯CSS实现，无JavaScript，效果不错，实用性强，兼容各种浏览器！
第一步：
下载源代码及背景图片
第二步：
在网页<head>区添加样式定义
[code]
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at //www.cssplay.co.uk/menus/drop_variations.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
/* Set up the default font and ovrall size to include image */
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
/* for this demo only */
#nav {margin:20px 0 80px 0;}
/* the styling */
#nav {float:left; padding-left:10px; width:740px; height:auto;background:#d1e1ce url("bg.gif") repeat-x bottom;}
#nav .select, #nav .current {margin:2.6em 0 0 0; padding:0; list-style:none; display:block; float:left;}
#nav .sub {margin:0; padding:0; list-style:none;}
#nav li {display:block; float:left; margin:0; padding:0; position:relative; z-index:100;}
#nav .current li {z-index:50;}
#nav .select a,
#nav .current a {display:block; height:2.5em; float:left; width:100px; background:url("left_both.gif") no-repeat left top; padding:0 0 0 9px; border-bottom:1px solid #765; text-decoration:none; font-weight:bold; line-height:2.4em; white-space:nowrap;}
/* calculate the required widths of the top level */
#nav .one a {width:10em;}
#nav .two a {width:19em;}
#nav .three a {width:9.5em;}
#nav .four a {width:9em;}
#nav .select a b,
#nav .current a b {height:100%; display:block; background:url("right_both.gif") no-repeat right top; padding:0 15px 0 6px; color:#553;}
#nav .sub {display:none;}
/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:1em;}
#nav .select a:hover b {color:#000; cursor:pointer;}
#nav .current a {background-position:0 -150px; border-color:#fff;}
#nav .current a b {background-position:100% -150px; color:#000;}
#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {border-color:#aba; background:#d1e1ce; color:#000;}
#nav .current .sub .current_sub a,
#nav .current .sub a:hover {border-color:#aba; background:#d1e1ce; color:#000;}
#nav .current .sub,
#nav .select a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:730px; top:2.5em; background:#fff; margin-top:1px; padding:10px 0 20px 0;}
* html #nav .current .sub, * html #nav .select a:hover .sub {margin-top:0; margin-t/op:1px;}
#nav .current .sub li a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:inline; background:#fff; border:1px solid #ddd; padding:0 10px; margin:0 10px 0 0; width:auto; white-space:nowrap; font-weight:normal; font-size:0.9em; height:2em; line-height:1.9em;}
#nav .select a:hover,
#nav li:hover a {background-position:0% -150px; border-color:#fff;}
#nav .select a:hover b,
#nav .select li:hover a b {background-position:100% -150px; border-color:#fff; color:#000;}
/* calculate the left edge position of each sub level */
#nav .one .sub {left:0;}
#nav .two .sub {left:-10em; margin-left:-9px;}
#nav .three .sub {left:-29em; margin-left:-18px;}
* html #nav .three .sub {margin-left:-9px; marg/in-left:-18px;}
#nav .four .sub {left:-38.5em; margin-left:-27px;}
* html #nav .four .sub {margin-left:-18px; marg/in-left:-27px;}
</style>
[/code]
第三步：
在网页<body>区添加菜单显示HTML代码
[code]
<div id="nav">
<ul class="select one"><li><a href="//www.sharejs.com"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="doors_drop_line.html?current=one&sub=a">The Hay Wain</a></li>
<li><a href="doors_drop_line.html?current=one&sub=b">Brighton Beach</a></li>
<li><a href="doors_drop_line.html?current=one&sub=c">Malvern Hall</a></li>
<li><a href="doors_drop_line.html?current=one&sub=d">Salisbury Cathedral</a></li>
<li><a href="doors_drop_line.html?current=one&sub=e">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="current two"><li><a href="doors_drop_line.html?current=two&sub=none"><b>Joseph Mallord William Turner</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="doors_drop_line.html?current=two&sub=a">Fishermen at Sea</a></li>
<li><a href="doors_drop_line.html?current=two&sub=b">The Shipwreck</a></li>
<li class="current_sub"><a href="doors_drop_line.html?current=two&sub=c">The Vale of Ashburnham</a></li>
<li><a href="doors_drop_line.html?current=two&sub=d">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select three"><li><a href="doors_drop_line.html?current=three&sub=none"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="doors_drop_line.html?current=three&sub=a">The Girl with Green Eyes</a></li>
<li><a href="doors_drop_line.html?current=three&sub=b">The Dream</a></li>
<li><a href="doors_drop_line.html?current=three&sub=c">Woman in Blue</a></li>
<li><a href="doors_drop_line.html?current=three&sub=d">The Yellow Dress</a></li>
<li><a href="doors_drop_line.html?current=three&sub=e">The Piano Lesson</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select four"><li><a href="doors_drop_line.html?current=four&sub=none"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="doors_drop_line.html?current=four&sub=a">The Large Bathers</a></li>
<li><a href="doors_drop_line.html?current=four&sub=b">Onions and Bottles</a></li>
<li><a href="doors_drop_line.html?current=four&sub=c">Mardi Gras</a></li>
<li><a href="doors_drop_line.html?current=four&sub=d">Still Life</a></li>
<li><a href="doors_drop_line.html?current=four&sub=e">Boy in a Red Waistcoat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
[/code] |
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
