手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css三级下拉菜单实现方法分享
css三级下拉菜单实现方法分享
摘要:test/*设置通配符样式*/*{margin:0;padding:0;}body{font-size:12px;}ul{list-styl...

css三级下拉菜单实现方法分享1

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<style type = "text/css">

/*设置通配符样式*/

*{

margin:0;

padding:0;

}

body{

font-size:12px;

}

ul{

list-style:none;

}

a{

text-decoration:none;

}</p> <p>/*设置二级导航样式*/

.nav {

width:500px;

height:30px;

background-color:#b4b4b4;

/*导航栏居中*/

margin:auto;

}

.nav ul li {

width:100px;

height:30px;

float:left;

position:relative;

}

.nav ul li a {

display:block;

width:96px;

border:2px solid gray;

height:26px;

line-height:26px;

text-align:center;

}

.nav ul li a:hover {

background-color:yellow;

}</p> <p>/*设置一级导航样式*/

.nav ul li ul{

display:none;

}

.nav ul li:hover ul{

display:block;

width:100px;

position:absolute;

top:30px;

left:0;

background-color:white;

}

.nav ul li:hover ul li a{

display:block;

width:96px;

height:26px;

line-height:26px;

border:2px solid gray;

text-align:center;

}

.nav ul li:hover ul li a:hover{

background-color:orange;

}</p> <p>/*设置三级导航样式*/

.nav ul li:hover ul li ul {

display:none;

}

.nav ul li:hover ul li:hover ul{

display:block;

width:100px;

position:absolute;

top:0px;

left:100px;

background-color:#b4b4b4;

}

.nav ul li:hover ul li:hover ul li {

width:100px;

height:30px;

}

.nav ul li:hover ul li:hover ul li a {

display:block;

width:96px;

height:26px;

line-height:26px;

border:2px solid gray;

text-align:center;

}

.nav ul li:hover ul li:hover ul li a:hover {

background-color:#00CC00;

}

.nav ul li:hover ul .nav_jw ul {

display:none;

}

.nav ul li:hover ul .nav_jw:hover ul{

display:block;

width:100px;

position:absolute;

top:0px;

left:-100px;

background-color:#b4b4b4;

}

.nav ul li:hover ul .nav_jw:hover ul li {

width:100px;

height:30px;

}

.nav ul li:hover ul .nav_jw:hover ul li a {

display:block;

width:96px;

height:26px;

line-height:26px;

border:2px solid gray;

text-align:center;

}

.nav ul li:hover ul .nav_jw:hover ul li a:hover {

background-color:#00CC00;

}</p> <p></style>

</head>

<body>

<div class = "nav">

<ul>

<li><a href = "#">一级导航</a>

<ul>

<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>

<ul>

<li><a href = "#">三级导航</a></li>

<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>

</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>

<ul>

<li><a href = "#">二级导航</a></li>

<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>

<ul>

<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>

<ul>

<li><a href = "#">三级导航</a></li>

<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>

</ul>

</li>

</ul>

</div>

</body>

</html>

【css三级下拉菜单实现方法分享】相关文章:

css实现li中文本超出行宽自动隐藏

CSS样式表实现效果很好的分页效果源代码

纯css实现的下拉菜单只有边框底纹用到图片

三个很特别的CSS小技巧分享

css实现连续的英文或数字自动换行的方法

用css实现文字的自动隐藏

css中换行的几种常用方式整理

css的三种定位方式使用探讨

DIV+CSS创建三栏网页布局方法介绍

img标签下多余空白BUG解决方法

精品推荐
分类导航