css下拉导航栏代码

最新推荐文章于 2024-10-28 20:58:59 发布

weixin_34249367

最新推荐文章于 2024-10-28 20:58:59 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuyudong0825/p/4824462.html

<!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>