码迷,mamicode.com
首页 > Web开发 > 详细

css下拉导航栏代码

时间:2015-09-09 22:39:41      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--<link href="test3.css" rel="stylesheet" type="text/css"/>-->
<style type="text/css">
* {
	margin: 0px;
	padding: 0px
}
section {
	background: #444;
	color: #E9E9E9
}
a {
	text-decoration: none;
	color: #55e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
nav {
	width: 400px;
	height: 60px;
	margin: 0 auto;
	color: #999999;
}
ul, li {
	list-style-type: none
}
nav>ul >li {
	float: left;
	position: relative;
}
nav>ul >li >a {
	display: block;
	padding: 20px 0px;
	width: 80px;
	text-align: center;
	border-right: 1px solid #e9e9e9;
}
.subnav {
	display: none;
}
nav>ul>li:hover {
	background: #12aeef;
}
nav>ul>li:hover .subnav {
	display: block;
	position: absolute;
	margin-top: 1px
}
.subnav a {
	display: block;
	background-color: #12aeef;
	color: #FFFFFF;
	border-bottom: 1px solid #f2f2f2;
	width: 100px;
	text-align: center;
}
.subnav a:hover {
	background: #6dc7ec;
}
</style>
</head>

<body>
<header>
  <nav>
    <ul>
      <li><a href="#">Home</a>
        <ul class="subnav">
          <li><a href="#">Home1</a></li>
          <li><a href="#">Home2</a></li>
          <li><a href="#">Home3</a></li>
        </ul>
      </li>
      <li><a href="#">About Me</a>
        <ul class="subnav">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Me</a></li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <div> Nav test </div>
  </article>
</section>
</body>
</html>

  

  技术分享

css下拉导航栏代码

标签:

原文地址:http://www.cnblogs.com/whytohow/p/4796069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!