一个精美的CSS二级导航栏样式

学习笔记马富天 2016-04-29 20:15:05 81 0

【摘要】写了一个精美的纯CSS二级菜单导航栏，代码简洁，大家可以看看。

先上代码：

<!DOCTYPE>

<html>

	<head>

		<title>一个精美的CCS二级导航栏样式</title>

		<meta charset = "utf-8" />

		<style type="text/css">

			.nav{margin:0;padding:0;list-style:none;font-size:12px;}

			.nav li{float:left;position:relative;}

			.nav li a{color:#666;text-decoration:none;border:1px dotted #ADADAD;border-right:none;min-width:60px;text-align:center;display:inline-block;line-height:40px;background-color:#F8F8F8;padding:0 10px;}

			.nav li a:hover{color:#999;}

			.nav li .active{color:#FFF;background-color:#D8450B;border-top:1px dotted #D8450B;border-bottom:1px dotted #D8450B;}

			.nav li .active:hover{color:#FFF;background-color:#D8450B;}

			.nav li .first{border-bottom-left-radius:4px;border-top-left-radius:4px;}

			.nav li .last{border-right:1px dotted #ADADAD;border-top-right-radius:4px;border-bottom-right-radius:4px;}

			.nav li:hover .sub_nav{display:block;}

			.nav .sub_nav{position:absolute;top:42px;left:-40px;z-index:999;display:none;}

			.nav .sub_nav li{position:static;}

			.nav .sub_nav li a{border:1px dotted #CCC;border-top:none;}

			.nav .sub_nav li .sub_last{border:1px dotted #CCC;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;}

			div{border:1px solid #999;float:left;width:100%;min-height:300px;margin-top:30px;font-size:12px;}

		</style>

	</head>

	<body>

		<ul class="nav">

			<li><a href="" class="first">首页</a></li>

			<li><a href="">技术</a>

				<ul class="sub_nav">

					<li><a href="">Java</a></li>

					<li><a href="">PHP</a></li>

					<li><a href="">C++</a></li>

					<li><a href="" class="sub_last">IOS</a></li>

				</ul>

			</li>

			<li><a href="">产品</a>

				<ul class="sub_nav">

					<li><a href="">产品总监</a></li>

					<li><a href="">产品策划</a></li>

					<li><a href="">游戏策划</a></li>

					<li><a href="" class="sub_last">产品经理</a></li>

				</ul>

			</li>

			<li><a href="">设计</a>

				<ul class="sub_nav">

					<li><a href="">UI</a></li>

					<li><a href="">UE</a></li>

					<li><a href="">设计总监</a></li>

					<li><a href="" class="sub_last">交互设计</a></li>

				</ul>

			</li>

			<li><a href="">运营</a>

				<ul class="sub_nav">

					<li><a href="">数据运营</a></li>

					<li><a href="" class="sub_last">编辑</a></li>

				</ul>

			</li>

			<li><a href="" class="last active">市场与销售</a>

				<ul class="sub_nav">

					<li><a href="">市场推广</a></li>

					<li><a href="" class="sub_last">市场总监</a></li>

				</ul>

			</li>

		</ul>

		<div>这是主页内容哦~~~</div>

	</body>

</html>

效果图如上如所示，对大家有帮助的话，希望大家点个赞哦~

版权归马富天PHP博客所有

本文标题：《一个精美的CSS二级导航栏样式》

本文链接地址：http://www.mafutian.net/80.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶5

踩0

但愿每次回忆，对生活都不感到负疚。

打赏银两×

一个精美的CSS二级导航栏样式

随机阅读换一批

文章分类

TOP10