css 如何制作一个垂直的导航栏呢?


摘要:
下文讲述css 制作一个垂直导航栏的方法分享,如下所示:

导航栏被广泛应用于网站及各种系统中,下文讲述使用css 制作html导航的方法,如下:

实现思路:
1.使用ul li 生成列表
2.使用css 设置ul 列表样式
3.使用css 设置li 中链接样式
4.使用css 设置li 中链接样式hover信息

例:
设置一个下拉列表样式

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    background-color:blue;
}
 
li a {
    display: block;
    color: white;
    padding: 10px 18px;
    text-decoration:none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color:red;
    color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">教程</a></li>
</ul>

<p></p>
<p>li全部都为点击区域</p>
</body>
</html>
 

css_菜单样式应用举例

css_菜单样式应用举例


相关阅读:
CSS 列表样式设置方法分享