很简洁,代码如下(可兼容手机),有问题请留言:
<!doctype html>
<html lang="zh-Hans-CN">
<head>
<meta charset="gbk">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Name: 地上马, Mail: linjialiang@163.com">
<title>PC端纯css二级栏目导航条</title>
<meta name="keywords" content="以英文逗号隔开, 逗号后面空一格">
<meta name="description" content="以英文逗号隔开, 逗号后面空一格[不超过150个字符]">
<style>
/*公共部分*/
html{font-size:10px;}
body, div, dl, dt, dd, a{margin:0; paddding:0;}
a{text-decoration:none;}
/*头部导航*/
.header-nav{width: 100%;text-align: center;font: 16px/48px "微软雅黑";background-color: #851b1b;}
.header-nav a{color: #f9f6f1;}
.header-nav dl{width: 118px;display: inline-block;position: relative;}
.header-nav dd{display: none;position: absolute; z-index:1; top: 3em;left: 0;min-width: 118px;background-color: #851b1b;}
.header-nav dd a{display: block;white-space: nowrap;line-height: 1.8em;text-align: left;padding: 0 10px;}
/*hover 属性*/
.header-nav dl:hover a{color: white;}
.header-nav dl:hover a:hover{font-size: 110%;}
.header-nav dl:hover > dd{display: block;padding: 5px 0;}
.header-nav dl:hover > dd a:hover{background-color: #f9f6f1;color: #851b1b ;}
/*media*/
@media screen and (max-width:960px){
.header-nav{font-size:0;}
.header-nav dl{font-size:16px;}
.header-nav dl {width:25%;}
.header-nav dl > dd{width:100%;}
.header-nav dl > dd a{text-align:center; overflow-x:auto;}
}
@media screen and (max-width:480px) and (min-width:320px){
.header-nav dl {width:50%;}
}
</style>
</head>
<body>
<div class="header-nav bg-f9f6f1 color-f9f6f1">
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目这是子栏目这是子栏目这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
<dl>
<dt><a href="#">这是一级栏目</a></dt>
<dd>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
<a href="#">这是子栏目</a>
</dd>
</dl>
</div>
</body>
</html>