HTML/Css样式简单的实现导航栏、使用的一些css选择器，可读性较高的鼠标悬停事件，HTML+css实现

本文链接：https://blog.youkuaiyun.com/weixin_44657829/article/details/105326856

本文介绍如何使用CSS选择器实现简洁的网页导航栏。通过浮动、相对定位和隐藏块标签等技巧，实现导航项并列及鼠标悬停效果，提供代码示例。

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

导航栏看似平凡但却是一个网站的精髓，根本所在，下面是使用几个css选择器简单的实现了导航栏，

块元素使用浮动效果实现并列一行，指针停留监听通过隐藏块标签，完成效果，具体实现如下代码

代码记录

元素：<div><ul><li>,

盒子属性：margin,padding

注：待完善()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航</title>
		<style type="text/css">	
			 * {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style:none;/*ul: 取消序标 */
			}
			a {
				text-decoration: none;/* a:取消下划线 */	
			}
			.other{
				width: 700px;
				height: 50px;
				line-height: 50px;
				margin: 0px auto;/* 控制div与页边距 */
				position: relative;/* 相对定位 */
			}
			/* .other ul {
				height: 400px;
			} */
			.other ul li {
				
				float: left;/*左浮动*/
				border-right: 1px solid #aaff7f;/*左右边框样式*/
				background-color: #ffaaff;	/*背景颜色*/
			}
			.other ul li:last-child {
				border-right: none;/*右边框样式*/
			}
			.other ul li a{
				display: block;/* a标签显示 */
				width: 100px;/* 设置字体大小 */
				text-align: center;/* a标签字体居中 */
				color: #ffffff;/*1a标签字体设置颜色 */	
			}
			.other ul li div {
				display: none;/* 隐藏div标签 */ 
				 position: absolute;/* 绝对定位 */
				left: 0;
				top: 50px;
				background-color: #aaffff;
				width: 72%;		
			}
			.other ul li:hover{
				background-color: purple;/*鼠标悬停  背景颜色*/
			}
			.other ul li:hover div{
				display: block;/*鼠标悬停，显示div样式*/
			}
		</style>
	</head>
	<body>
		<div class="other">
			<ul>
				<li>
					<a href="#">Java</a><!-- 超链接 -->
					<div>Java是一门优秀的语言</div>
				</li>
				<li>
					<a href="#">C语言</a>
					<div>C语言是一门优秀的语言</div>
				</li>
				<li>
					<a href="#">Python</a>
					<div>Python是一门优秀的语言</div>
				</li>
				<li>
					<a href="#">PHP</a>
					<div>PHP是一门优秀的语言</div>
				</li>
				<li> 
				<a href="#">Android</a>
                <div>Android是一门优秀的语言</div>
				</li>
			</ul>
		</div>
	</body>
</html>