主要用的知识是css中的hover伪类，当鼠标放停在父导航栏上的li元素时候，我们就修改子菜单下面的ul的display属性，这样就可以实现hover的效果了。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drop Down Navigation with CSS Only</title>
<style>
body, div, ul, li { margin: 0; padding: 0; }
#header {
min-width: 800px;
height: 150px;
}
#nav {
width: 100%;
background-color: green;
float: left;
}
#nav li {
list-style: none;
float: left;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
}
#nav li a {
color: white;
text-decoration: none;
display: block;
}
#nav li a:hover {
background-color: #066;
}
#nav li ul {
position: absolute;
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
float: none;
display: inline;
}
#nav li ul li a {
width: 118px;
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: green;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
</style>
<!--[if lte IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
</head>
<body id="about">
<div id="header">
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul><!-- nav -->
</div><!-- header -->
</body>
</html>
分享到：
相关推荐
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
本文将深入探讨五款利用CSS实现的横向下拉菜单导航条设计，它们不仅美观，而且具有实用性，能够提升用户体验。 1. **扁平化设计导航条** 扁平化设计是现代网页设计的趋势，其简洁、清晰的风格深受用户喜爱。通过...
在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地组织和展示大量的导航选项，尤其是在有限的空间内。CSS（层叠样式表）是用于控制网页元素样式的关键技术，包括创建下拉菜单。本篇文章将深入探讨如何使用...
在“五款漂亮的CSS横向下拉菜单导航条”中，可能包含了各种设计风格和实现方法，如纯CSS实现、JavaScript辅助、过渡效果的应用等。这些实例提供了实际操作的经验，可以帮助开发者学习和借鉴。 总结，创建漂亮的CSS...
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题，它涵盖了网页布局、样式设计以及交互功能的实现。接下来，我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先，CSS（层叠样式表）是用于...
纯CSS控制实现的拉菜单效果，反复删改，只留下了核心代码，在最大程度上为需要的人留下了空间
总的来说，创建一个带阴影的下拉导航菜单需要理解HTML的结构和CSS的样式规则，通过结合定位、过渡和阴影效果，可以实现美观且功能完善的导航菜单。这只是一个基础示例，实际项目中可以根据需要进行扩展和优化，比如...
过去，我们通常依赖JavaScript库如jQuery来实现这种效果，但随着CSS技术的发展，现在可以仅使用CSS来创建功能完备的下拉导航栏。本文将深入探讨如何使用纯CSS实现一个简单的下拉导航栏，并提供相关的HTML结构和CSS...
代码不多，胜在实用，适合刚接触的小白学习
HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开...
本文将详细解析如何使用CSS（层叠样式表）来实现一个功能完善的下拉菜单。 首先，我们需要了解下拉菜单的基本结构。通常，下拉菜单由HTML的`<ul>`和`<li>`元素构建。`<ul>`元素作为容器，包含多个`<li>`元素，每个`...
在这个主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来实现一个可伸缩的侧边导航栏。 首先，让我们从 HTML 结构开始。一个基本的侧边导航栏通常包含一系列链接或按钮，这些链接可能被组织成层次结构。以下...
### 纯CSS导航下拉菜单知识点解析 在现代网页设计中，导航栏是非常重要的组成部分之一，它不仅能够提升用户体验，还能帮助用户快速找到所需的信息。本次分享的是一个完全使用CSS实现的导航下拉菜单，这不仅可以减少...
使用DIV+CSS技术实现导航栏菜单的制作，鼠标经过每个菜单标题，它的子菜单就会出现。
本教程将详细讲解如何使用HTML、CSS和jQuery来实现一个最简单的右侧导航栏效果。这个导航栏将具有响应式设计，能在不同设备上良好展示，并能通过点击事件动态显示和隐藏。 首先，我们从HTML结构开始。一个基础的...
总的来说，"DIVCSS商品分类下拉导航菜单"是一个结合了HTML、CSS和JavaScript技术的网页组件，通过巧妙地使用这些技术，实现了美观且实用的商品分类导航功能，尤其适用于电商平台，提高用户体验。设计时考虑了颜色...
本文将深入探讨如何使用纯CSS实现兼容IE6+及主流浏览器的多级下拉菜单，帮助Web开发者提升用户体验，同时简化开发流程。 首先，让我们了解CSS（层叠样式表）的基本概念。CSS是一种用于描述HTML或XML（包括如SVG、...
实现二级下拉导航栏的技术方法多样，常见的是使用HTML、CSS和JavaScript。HTML用于创建基础的结构，CSS用于样式设置和布局控制，JavaScript则用于添加交互效果，如动态展开和收起菜单。 在CSS中，可以使用`:hover`...
纯CSS实现的下拉导航三级菜单，纯CSS实现的下拉导航三级菜单