利用div+css实现简单的纵向导航栏

109 阅读 0 评论 72 点赞

我是靠谱客的博主奋斗果汁，这篇文章主要介绍利用div+css实现简单的纵向导航栏，现在分享给大家，希望可以做个参考。

利用div+css实现简单的纵向导航栏

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的纵向导航</title>
<style type="text/css">

</style>
</head>
<body>
<div id="content">
	<ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">公司简介</a>
            <ul>
                <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>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的纵向导航</title>
<style type="text/css">
<!--
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {
margin: 0px; padding: 0px; font-size: 13px; font-weight: normal; 
}
ul { list-style: none; }
img { border-style: none; }
#content{
	line-height:30px;
	width:120px;
}
#content ul {
	list-style-type: none;
	margin:0px;
	padding:0px;
	background:#ccc;/*灰色*/	
}
#content ul li {
	border-top:#fff solid 1px;
	position: relative;	/*相对定位，使其不浮动，占用原来空间*/
}
#content ul li ul{
	width: 120px;/*定义宽度*/
	position: absolute;/*使其浮动起来，不占据空间，使其不占用原来空间*/
	left: 120px;/*左移120px*/
	top: 0px;/*不加会低一格*/
	display:none;
}
#content ul li:hover ul{
	display:block;
}
a {
	color: #000;
	text-decoration: none;
	padding-left: 15px;
}
a:hover {
	color: #C03;
}
-->
</style>
</head>
<body>
<div id="content">
	<ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">公司简介</a>
            <ul>
                <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>
</div>
</body>
</html>