css二级导航菜单效果

时间：2022-06-25 21:21:43 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<div class="demo-container">
<br><br><style type="text/<a href=" http: target="_blank">css">#nav{margin:20px
0 80px 0}#nav{float:left;height:auto;background:#fff url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/bottom_line.gif) repeat-x bottom;position:relative}#nav .select, #nav
.current{margin:0;padding:0;list-style:none;display:block}#nav
li{display:inline;margin:0;padding:0;height:auto}#nav .select a,
#nav .current
a{display:block;float:left;background:url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/left_blue.gif) no-repeat left top;padding:0
0 0 3px;border-bottom:1px solid #000;text-decoration:none;font-size:10px;line-white-space:nowrap;margin-left:2px}* html #nav .select a, * html #nav .current
a{}#nav .select a b,
#nav .current a
b{height:100%;display:block;background:url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/right_blue.gif) no-repeat right top;padding:0
6px 0 3px;color:#000}#nav .select a:hover,
#nav .select li:hover
a{background-position:0 -75px;border-color:#046;cursor:pointer}#nav .select a:hover b,
#nav .select li:hover a
b{background-position:100% -75px;border-color:#046;color:#fff}#nav
.sub{display:none}#nav
table{position:absolute;border-collapse:collapse;left:0;top:0;font-size:11px}#nav .current
a{background-position:0 -75px;border-color:#046}#nav .current a
b{background-position:100% -75px;color:#ff6}#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover{background:#005984 url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat;color:#fff;text-decoration:underline}#nav .sub_active .current_sub a,
#nav .sub_active a:hover{background:#005984 url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat;color:#ff6;text-decoration:underline}#nav .select li a:hover .sub,
#nav .select li:hover
.sub{display:block;position:absolute;top:21px;left:0;background:#005984;margin-top:1px;padding:0;z-index:100;border-bottom:20px solid #fff}#nav .sub, #nav
.sub_active{margin:0;padding:0;list-style:none}#nav
.sub_active{display:block;position:absolute;top:21px;left:0;background:#005984;margin-top:1px;padding:0;z-index:10;color:#000;border-bottom:20px solid #fff}* html #nav .sub_active, * html #nav .select a:hover
.sub{z-index:-1;margin-top:0;margin-top:1px}#nav .sub_active
a{float:left;text-decoration:none;line-white-space:nowrap;font-weight:normal}#nav .sub_active a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li
a{display:inline;background:#005984 url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat;padding:0
10px;margin:0;font-size:10px;width:auto;white-space:nowrap;font-weight:normal;border:0;color:#fff;line-}</style>
<div id="nav">
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="current"><li></ul>
<ul class="sub_active">
<li>
<li>
<li>
<li class="current_sub">
<li>
</ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
<ul class="select"><li>
<ul class="sub">
<li><a href="https://www.111cn.net">好主题</a></li>
<li>
<li>
<li>
<li>
</ul> 
</li></ul>
</div>
<br class="clear"><br>
</div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

css二级导航菜单效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程