当前位置:首页 > HTML/CSS > 正文内容

css简单导航条制作

彭淇3年前 (2017-07-15)HTML/CSS26210

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="https://www.pengqi.club/" target="blank">网站首页</a>
      
    </li>
    <li><a href="https://www.pengqi.club/">学无止境</a>
      <ul>
        <li><a href="#">学无止境</a></li>
       
      </ul>
    </li>
    <li><a href="https://www.pengqi.club/">个人模板</a>
      <ul>
        <li><a href="#">个人模板</a></li>
     
      </ul>
    </li>
    <li><a href="https://www.pengqi.club/">技术探讨</a>
  <ul>
    <li><a href="#">技术探讨</a></li>
    <li><a href="#">技术探讨</a></li>
 
  </ul>
    </li>
    <li><a href="https://www.pengqi.club/">js实例</a></li>
  </ul>
</div>
</body>
</html>


扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/73.html

标签: css
分享给朋友:
返回列表

没有更早的文章了...

下一篇:纯CSS实现各种图形效果分享

相关文章

如何为网页选择合适的字体?

字体系列一般分为五种:Sans-serif、 Serif、 Monospace、 Cursive 和 Fantasy。 每个font-family包含了一系列具有相同特征的字体,这里...

纯CSS实现各种图形效果分享

纯CSS实现各种图形效果分享 CSS可以实现任意的图形,特别是CSS3的圆角、旋转、倾斜等效果出现之后,CSS2要想出现斜线,可利用border的特性,利用相邻的边框不同颜色出现斜线...

给网站添加好看的底部功能按钮

给网站添加好看的底部功能按钮

在一些博客手机版会看到底部有些按键很好看!跟下面图片的一样,把代码随便添加到首页或者footer文件就行<style type="text/css">.nav...

微信公众号开通

微信公众号开通

博主的微信公众号正式开通啦,欢迎扫描下方二维码关注,谢谢!...

HTML验证码生成

HTML验证码生成

如图所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...

关于本站已开通APP下载的公告

亲,大家好,本站于2017年9月6日正式开通用户下载APP功能,欢迎大家积极下载,成为本站的一份子!用户下载(可以直接点击此处,进行下载)(欢迎在下方直接安装,更方便哟)温馨提示:本软件经检测为无病毒...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。