CSS制作一个简单网页的下拉导航栏_html/css

CSS制作一个简单网页的下拉导航栏_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:43:00

原创

1932人浏览过

Brev AI

Brev.ai：搭载Suno AI V3.5技术的免费AI音乐生成器

437

查看详情

网页下拉导航栏的制作

网页下拉导航栏的制作很简单，只需要运用好CSS中伪选择器。

首先说明几个简单的伪选择器（比较常用的）：

立即学习“前端免费学习笔记（深入）”；

　　　　　　link:连接平常的状态

　　　　　　visited:连接被访问过之后

　　　　　　hover:鼠标放到连接上的时候

　　　　　　active:连接被按下的时候

　　通常导航栏是用列表标签制作，通过伪选择器的控制，实现其下拉的效果。

　　下面写一段简单导航栏：

父标签零
　　　　　　　　　　
- 子标签一

父标题一
　　　　　　　　　　　　
- 子标题一
- 子标题二
- 子标题二

父标题二
　　　　　　　　　　　　
- 子标题一
- 子标题二
- 子标题二
　　　　　　　　　　
父标题三
　　　　　　　　　　　　
- 子标题一
  　　　　　　　　　　　　　　
- 子标题二

CSS代码：

.navbar{
　　height: 120px;
　　width: 100%;
　　text-align:left;
　　font-family: arial, sans-serif;
　　background:url(navbar.png) no-repeat;
　　padding-top:10px;
　　}
/***********************************/
/*一级列表属性*/
.navbar ul{
　　float:left;
　　margin-top:0px;
　　padding:0px;/*Ul默认有内边距*/

　　}

.navbar ul li{
　　float:left;
　　width:91px;
　　padding-left:0px;
　　padding-top:0px;
　　}
.navbar ul li a{
　　text-align: center;
　　/*border-right:1px solid #e9e9e9; */
　　padding:10px;
　　display:block;
　　text-decoration:none;
　　color:#999;
}
/***************************************/

.link a:hover{
　　color: #F63;
　　}
/***************************************/
/*二级列表属性*/
.navbar ul li ul {
　　display: none;/**/
　　　　　　　　}
.navbar ul li:hover ul {
　　display: block;
　　position: absolute;
　　background-color:#CCC;
　　}
/*二级列表的样式*/
.navbar ul li ul{
　　width:95px;
　　}
.one_hopmepage{
　　width:80px;
　　}
.navbar ul li ul li{