龙空技术网

HTML+CSS做二级导航

不码不疯魔 1131

前言:

现在同学们对“csshover导航”大体比较看重,兄弟们都需要了解一些“csshover导航”的相关知识。那么小编也在网上收集了一些关于“csshover导航””的相关文章,希望朋友们能喜欢,我们快快来了解一下吧!




<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>导航菜单</title>

<link rel="stylesheet" type="text/css" href="css/nav.css"/>

</head>

<body>

<!--头部-->

<header>

<div class="container">

<!--导航条-->

<ul class="nav">

<li style="background-color: gold;">

<a href="#">首页</a>

</li>

<li>

<a href="#">公司概况</a>

<ul class="nav-list">

<li>公司简介</li>

<li>发展历程</li>

<li>组织机构</li>

<li>总经理寄语</li>

</ul>

</li>

<li>

<a href="#">公司文化</a>

<ul class="nav-list">

<li>文化理念</li>

<li>员工活动</li>

<li>党/工/团建设</li>

</ul>

</li>

<li>

<a href="#">公司新闻</a>

</li>

<li>

<a href="#">服务内容</a>

</li>

<li>

<a href="#">法律政策</a>

</li>

<li>

<a href="#">人才招聘</a>

</li>

<li>

<a href="#">联系我们</a>

</li>

</ul>

</div>

</header>

</body>

</html>

nav.css

@charset "utf-8";

*{

margin: 0px;

padding: 0px;

}

header{

height: 65px;

background-color: #666666;

}

.container{

margin: 0 auto;

width: 1180px;

height: 65px;

/*background-color: #efefef;*/

}

.nav{height: 65px;

line-height: 65px;

text-align: center;

}

.nav>li{

list-style:none;

float: left;

width: 100px;

margin-right: 2px;

position: relative;

}

.nav>li>a{

text-decoration: none;

color: white;

}

.nav>li:hover{

background-color: gold;

}

.nav>li:hover>a{

color: #666666;

}

.nav li .nav-list{

width: 200px;

height: 300px;

background-color: #666666;

display: none;

}

.nav-list li{

list-style: none;

text-align: left;

padding-left: 10px;

}

.nav>li:hover .nav-list{

position: absolute;

left: 0px;

top: 66px;

display: block;

}

.nav>li:hover .nav-list li{

height: 35px;

line-height: 35px;

color: white;

font-weight: bold;

}

标签: #csshover导航