主要用的知识是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>
分享到：
相关推荐
css实现下拉菜单，鼠标移动到上面就可以显示下面的子菜单
总的来说，基于JavaScript和CSS的下拉式导航条设计涉及到了前端开发的基本技能，包括DOM操作、事件处理、CSS布局以及视觉效果的实现。通过实践和调试，我们可以创建出符合网站风格且用户体验良好的导航条。
而“纯CSS实现水平下拉导航菜单”是一个专注于利用CSS（层叠样式表）技术来创建具有下拉功能的水平导航菜单的解决方案。这种菜单特别适用于那些希望避免使用JavaScript或者希望菜单在无脚本环境下仍能正常工作的...
本文将深入探讨如何利用`div+css`实现一个高效的下拉导航栏，它不仅能够节省网页空间，还能够提供良好的分类功能，提升用户体验。 首先，我们要理解`div`元素的作用。`div`（Division）是HTML中的一个块级元素，它...
CSS多级下拉菜单导航条CSS多级下拉菜单导航条CSS多级下拉菜单导航条CSS多级下拉菜单导航条
CSS导航栏和下拉菜单是网页界面设计中常见的元素，它们能为用户提供直观且交互性强的浏览体验。以下将详细介绍如何使用CSS创建导航栏和下拉菜单，并介绍提供的两个工具。 1. CSS导航栏： 导航栏是网站顶部或侧边的...
"多级CSS3下拉菜单导航.jpg"是这个导航栏的效果展示图，你可以参考实现的效果进行实践。同时，"index.html"是包含完整代码的示例文件，"css"和"js"文件夹分别存储了对应的样式表和脚本文件，供你学习和调试。 通过...
本文将深入探讨五款利用CSS实现的横向下拉菜单导航条设计，它们不仅美观，而且具有实用性，能够提升用户体验。 1. **扁平化设计导航条** 扁平化设计是现代网页设计的趋势，其简洁、清晰的风格深受用户喜爱。通过...
在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地组织和展示大量的导航选项，尤其是在有限的空间内。CSS（层叠样式表）是用于控制网页元素样式的关键技术，包括创建下拉菜单。本篇文章将深入探讨如何使用...
在网页设计中，创建一个美观且功能强大的下拉菜单是至关重要的，特别是在构建导航系统时。CSS（层叠样式表）作为网页样式的核心语言，提供了丰富的功能来实现各种视觉效果，包括透明效果。本篇文章将深入探讨如何...
下面我们将详细探讨这五款WEB2.0漂亮的CSS横向下拉菜单导航条的设计原理、实现方法以及它们各自的特色。 首先，我们要理解CSS（层叠样式表）的作用。CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...
本文将详细介绍如何使用CSS3实现一款具有5种不同下拉动画效果的导航条下拉菜单。 首先，我们需要理解CSS3中的关键特性在创建此类动画中的作用： 1. **选择器**: CSS3引入了更强大的选择器，如`:hover`，`:active`...
本文将深入探讨“漂亮的CSS横向下拉菜单导航条”这一主题，分享五款精心设计的下拉菜单导航条实例，旨在提升用户体验和网站的整体美观度。 首先，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或...
纯CSS控制实现的拉菜单效果，反复删改，只留下了核心代码，在最大程度上为需要的人留下了空间
这表明下拉菜单通常会出现在网页的左侧，作为主导航栏的一部分。这种布局方式符合用户的浏览习惯，便于用户快速找到所需的信息。 在实际应用中，我们可能会遇到一些常见问题，比如菜单的响应式设计。为了适应不同...
本文将详细解析如何使用CSS（层叠样式表）来实现一个功能完善的下拉菜单。 首先，我们需要了解下拉菜单的基本结构。通常，下拉菜单由HTML的`<ul>`和`<li>`元素构建。`<ul>`元素作为容器，包含多个`<li>`元素，每个`...
在这个主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来实现一个可伸缩的侧边导航栏。 首先，让我们从 HTML 结构开始。一个基本的侧边导航栏通常包含一系列链接或按钮，这些链接可能被组织成层次结构。以下...
综上所述，"CSS页面滚动固定下拉导航菜单特效"涉及到的技术点包括CSS定位、媒体查询、下拉菜单实现、过渡动画、HTML结构、以及可能的CSS预处理器使用和浏览器兼容性处理。通过这些技术的结合，可以创建出既美观又...
使用DIV+CSS技术实现导航栏菜单的制作，鼠标经过每个菜单标题，它的子菜单就会出现。
总的来说，"DIVCSS商品分类下拉导航菜单"是一个结合了HTML、CSS和JavaScript技术的网页组件，通过巧妙地使用这些技术，实现了美观且实用的商品分类导航功能，尤其适用于电商平台，提高用户体验。设计时考虑了颜色...