用HTML和CSS实现的下拉菜单

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用HTML和CSS实现下拉列表</title>
<style>
/*导航栏的样式*/
*{margin:0;padding:0;}
#nav{background-color:#eee;width:500px;height:40px;margin:0 auto;}
ul{list-style-type:none;}
ul li{float:left;width:100px;line-height:40px;text-align:center;position:relative;}
a{text-decoration:none;color:#000;display:block;height:40px;width:100px;}
a:hover{color:#fff;background-color:#666;}
/*下拉菜单部分*/
ul li ul{position:absolute;left:0px;top:40px;display:none;}
ul li ul li{float:none;background-color:#eee;margin-top:2px;}
ul li ul li a:hover{background-color:#06f;}
/*实现下拉菜单显示*/
ul li:hover ul{display:block;}
</style>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">学习中心</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">经典案例</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">最新版本</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

时间： 2024-10-26 15:59:18

用HTML和CSS实现的下拉菜单的相关文章

CSS样式三级下拉菜单

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

CSS打造三级下拉菜单

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="d

使用纯CSS设计网页下拉菜单代码

分享一个纯CSS写的下拉菜单代码,结构非常简单,代码十分清晰,HTML+CSS下拉菜单代码.HTML代码部分: 在线预览>> <ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href=&quo

经典的 div + css 鼠标 hover 下拉菜单

经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> <style type="text/css"> nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#

纯css 来实现下拉菜单

对于导航栏中的下拉菜单,是我们在项目中遇到最多的一种下拉菜单的情况, 一般儿情况下,我们都是常用JavaScript 来实现下来功能.不过, 我们都知道,当我们在编码过程中,如果能用css 实现的功能,绝不用 js 去控制, 这是因为对于计算机而言,js 的性能远不及css 稳定,所以,对于下拉菜单我们同样可以用css 来实现. html部分: 1 <ul id="headerTabs"> 2 <li> 3 <a href="/found/tra

《精通CSS》一个下拉菜单的例子

这个例子是下拉菜单的,我进行了一点点改动,原理的确很简单,但是作者的代码层次感很清楚,值得学习:另外一点,作者在交互过程中的颜色变化,甚至精确到边框线之间的变化,虽然从旁观者的角度看基本上看不出来这个有什么变化,但是这种细致入微的思考和设计是值得学习和思考的,所谓细微之处方见技艺是否成熟,我觉得这是有道理的!不说了,上代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

CSS写动态下拉菜单 -----2017-03-27

动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor:  设置鼠标效果 opacity: 设置透明度 0-1 如下图所示 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <sty

CSS 实现样式下拉菜单

下拉菜单的实现 脚本: 1 <script type="text/javascript"> 2 function ShowSub(li) { 3 var subMenu = li.getElementsByTagName("ul")[0]; ; 4 subMenu.style.display = "block"; 5 } 6 function HideSub(li) { 7 var subMenu = li.getElementsBy