css简单导航条制作

原创 彭淇  2017-07-15 15:17:10  阅读 1699 次 评论 0 条

css简单导航条制作,效果如图所示:



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;padding: 0;
	}
	ul,li{
		list-style: none;
	}
	a { text-decoration:none;}
	.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li  a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
	</style>
</head>
<body>
	<div class="nav">
  <ul>
    <li><a href="http://pengqi.club/" target="blank">网站首页</a>
      
    </li>
    <li><a href="http://pengqi.club/">学无止境</a>
      <ul>
        <li><a href="#">学无止境</a></li>
       
      </ul>
    </li>
    <li><a href="http://pengqi.club/">个人模板</a>
      <ul>
        <li><a href="#">个人模板</a></li>
     
      </ul>
    </li>
    <li><a href="http://pengqi.club/">技术探讨</a>
  <ul>
    <li><a href="#">技术探讨</a></li>
    <li><a href="#">技术探讨</a></li>
 
  </ul>
    </li>
    <li><a href="http://pengqi.club/">js实例</a></li>
  </ul>
</div>
</body>
</html>


本文地址:http://pengqi.club/blog/73.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?