Html有子列的导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.titlediv {
background-color: white;
height: 60px;
width: 100%;
float: left;
padding: 0px;

text-align: center; /*字体居中*/
margin: auto;
}

.logo {
width: auto;
float: left;
height: auto;
margin-left: 50px;
}

.titlediv_ul {
list-style-image: url(img/5.jpg);
list-style-type: none; /*隐藏点*/
margin: 0;
margin-left: 100px;
padding: 0;
float: left;
}

.titlediv_ul > li {
/*white-space: nowrap;*/
/*横向*/
float: left;
}

.drop-down > a {
display: block; /*设置块级*/
width: 100px;
line-height: 60px; /*保证文字垂直居中*/
font-size: 14px;
color: #000000;
text-decoration: none;
}

/*悬浮效果*/
.drop-down > a:hover {
color: #60baed;
}

/*下拉菜单*/
.drop-down {
/*position: relative;*/
/* white-space: nowrap;!**!*/
}

.drop-down-content {
padding: 0;
display: none; /*1 先隐藏*/
}

.drop-down-content > li {
list-style-type: none; /*去点样式*/
}

.drop-down:hover .drop-down-content {
display: block; /*2显示*/
background-color: #60baed;
}

.drop-down-content > li > a {
display: block; /*设置块级*/
width: 100px;
line-height: 60px; /*保证文字垂直居中*/
font-size: 14px;
color: #110d06;
text-decoration: none;
}

.drop-down-content > li > a:hover {
color: #e5f4fd;

}
</style>
</head>
<body>
<div class="titlediv">
<ul class="titlediv_ul">
<li class="drop-down">
<a href="#ruanjian"> 电脑软件</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 驱动下载</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 网管租赁</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 软件宝库</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 官方论坛</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

posted on 2019-12-06 14:13  效率的九尾  阅读(74)  评论(0)    收藏  举报