notepad++
浏览器
打开Notepad++，先输入个页面框架
<！DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<hade>
</hade>
<body>
</body>
框架好了，那么就该定义页面的title，关键词keyword，和描述description
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>纯css二级导航下拉菜单</title>
<meta name="keyword" content="搜狗略懂">
<meta name="description" content="描述">
这些内容只能在<head></head>中完成。
定义页面使用的css样式，也是需要在<head>里定义的。
<style type="text/css">
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiao>ul>li { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiao>ul>li>ul>li { float:none;}
<!--nav>ul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
-->
</style>
添加一个DIV标签，在页面中划分出一个块来，用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
然后使用无序标签<ul>+样式<li> 来实现模块。
<div class="jiao">
<ul>
<li><a href="#">搜狗略懂</a>
<ul>
<li><a href="#">搜狗问问</a></li>
<li><a href="#">搜狗输入法</a></li>
<li><a href="#">搜狗浏览器</a></li>
<li><a href="#">搜狐</a></li>
</ul>
</div>
放上全部的代码吧，可以参考一下啊，
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">//允许你通过一个网址来识别你的标记
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keyword" content="利用css实现下拉菜单">
<meta name="description" content="搜狗略懂、css分享">
<title>css实现下拉导航栏菜单</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiao>ul>li { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiao>ul>li>ul>li { float:none;}
<!--nav>ul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
-->
</style>
</head>
<body>
<div class="jiao">
<ul>
<li><a href="#">搜狗略懂</a>
<ul>
<li><a href="#">搜狗问问</a></li>
<li><a href="#">搜狗输入法</a></li>
<li><a href="#">搜狗浏览器</a></li>
<li><a href="#">搜狐</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
如果要添加更多的菜单，只需要后边继续添加<ul>/<li>即可
写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
纯用CSS做的下拉菜单，真的很简单。【211】
图1
一、开始吧，我们先做一个盒子drop，它以后要装的是按钮和下拉列表。
图2
二、在盒子drop里面做一个按钮dropbt。
图3
图4
三、按钮有点丑了，于是我们给按钮加点样式。
图5
图6
四、下面我们做出下拉列表，它们是一串链接，我们用一个盒子dropbox装着。
图7
图8
五、列表是横着的，而且不怎么好看，我们先改超链接a的样式。
图9
图10
六、菜单列表好看许多了，我们给列表盒子dropbox加点样式，比如阴影。
图11
图12
七、再好看的菜单列表一开始也是要先隐藏的。
图13
图14
八、我们让鼠标移到按钮上时，按钮颜色变浅。
图15
图16
九、现在可以设置点击后，下拉菜单出现了。
图17
图18
十、下拉菜单出现了，但你会发现鼠标在右侧时，菜单也会弹出来，我们改一下样式，解决这个问题，再次移过去的时候，你会发现只有在按钮位置才会弹出菜单了。
图19
十一、完善一下，当鼠标移动菜单列表时，背景色改变。
图20
图21
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .dropbt{ padding: 10px; /* 按钮内边框离 */ font-size: 16px; /* 按钮字体大小 */ background: #369; /* 按钮背景色 */ border: none; /* 去掉按钮边框 */ color: white; /* 按钮字的颜色 */ cursor: pointer; /* 鼠标在按钮上的小手标记 */ } .dropbox a { color: black; /* 链接字的颜色改成黑色 */ padding: 10px; /* 链接内边距 */ text-decoration: none; /* 去掉可恶的下划线 */ display: block; /* 链接独立成行 */ } .dropbox{ display: none; /* 不显示 */ position: absolute; /* 盒子的位置为相对定位 */ background-color: #f9f9f9; /* 盒子的背景色 */ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); /* 盒子的阴影，这里设置了右边4下边8 */ } .drop:hover .dropbt{ background: #2f84d8; /* 鼠标在按钮上时，按钮背景色变 */ } .drop:hover .dropbox{ display: block; /* 鼠标在drop上时，dropbox菜单出现 */ } .drop{ display: inline-block; /* 这是让盒子drop不占整行，去掉盒子天生占行的属性 */ } .dropbox a:hover{ background: #cccdcf; /* 这里是鼠标移动菜单列表时改变背景色 */ } </style></head><body> <div class="drop"> <button class="dropbt">点我下拉菜单</button> <div class="dropbox"> <a href="#">是下拉菜单一</a> <a href="#">是下拉菜单二</a> <a href="#">是下拉菜单三</a> </div> </div></body></html>
