简单漂亮的导航栏

最新推荐文章于 2025-06-03 15:48:52 发布

原创最新推荐文章于 2025-06-03 15:48:52 发布 · 8.5k 阅读

99 ·

CC 4.0 BY-SA版权

博主在网上看到不错的效果并下载下来分享，还提到要检查导入JAR。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

此效果我在网上浏览的时候看着不错，自己下了下来，希望可以帮到你们。

检查导入JAR

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
		<style>
			body{background: whitesmoke;font-size: 14px;margin: 0;}
			nav ul li{list-style: none;}
			a {text-decoration: none;}
			.container{width: 1000px; margin: auto;}
			nav {background: #1A66B3;}
			nav ul {font-size: 0;margin: 0;padding: 0;}
			nav ul li {display: inline-block;}
			nav ul li a {
			  color: #fff;
			  display: block;
			  font-size: 14px;
			  padding: 15px 14px;
			  transition: 0.3s linear;
			}
			nav ul li:hover {background: #126d9b;}
			nav ul li ul {
			  border-bottom: 5px solid #2ba0db;
			  display: none;
			  position: absolute;
			  width: 250px;
			}
			nav ul li ul li {
			  border-top: 1px solid #444;
			  display: block;
			}
			
			nav ul li ul li:first-child {
			  border-top: none;
			}
			
			nav ul li ul li a {
			  background:cadetblue;
			  display: block;
			  padding: 10px 14px;
			}
			
			nav ul li ul li a:hover {
			  background: #126d9b;
			}
			
			nav .fa.fa-angle-down {
			  margin-left: 6px;
			}
		</style>
	</head>
	<body>
		<nav>
		  <div class="container">
		    <ul>
		      <li><a href="#">首页</a></li>
		      <li><a href="#">关于</a></li>
		      <li>
		        <a href="#">类别<i class='fa fa-angle-down'></i></a>
			        <ul>
			          <li><a href="#">类别1</a></li>
			          <li><a href="#">类别2</a></li>
			          <li><a href="#">类别3</a></li>
			        </ul>
		      </li>
		      <li class='sub-menu'>
		        <a href="#">服务<i class='fa fa-angle-down'></i></a>
			        <ul>
			          <li><a href="#">服务1</a></li>
			          <li><a href="#">服务2</a></li>
			          <li><a href="#">服务3</a></li>
			          <li><a href="#">服务4</a></li>
			          <li><a href="#">服务5</a></li>
			          <li><a href="#">服务6</a></li>
			        </ul>
		      </li>
		      <li><a href="#">联系我们</a></li>
		    </ul>
		  </div>
		</nav>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$('nav li').hover(
  function() {
	  $('ul', this).stop().slideDown(200);
  },
	function() {
    $('ul', this).stop().slideUp(200);
  }
);
</script>
	</body>
</html>

效果

在这里插入图片描述