notepad++
浏览器
01打开Notepad++，先输入个页面框架
<！DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<hade>
</hade>
<body>
</body>
02框架好了，那么就该定义页面的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>中完成。
03定义页面使用的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:150pxheight:80pxtext-align:centerline-height:100pxdisplay:blockborder-right:5px solid #redbackground:#redcolor:#red}
.jiao ul li ul { position:absolutedisplay: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>
04添加一个DIV标签，在页面中划分出一个块来，用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
05然后使用无序标签<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>
06放上全部的代码吧，可以参考一下啊，
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"> //允许你通过一个网址来识别你的标记
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=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:150pxheight:80pxtext-align:centerline-height:100pxdisplay:blockborder-right:5px solid #redbackground:#redcolor:#red}
.jiao ul li ul { position:absolutedisplay: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>
07如果要添加更多的菜单，只需要后边继续添加<ul>/<li>即可
特别提示写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
开通2012版旺铺的朋友都会发现淘宝越来越向广大卖家朋友开放了，其中最重要的体现是支持自定义CSS了。CSS不是短时间可以学会的，这也让广大卖家朋友头疼，不过不用太过担心，淘宝既然开放了，就会有很多像我一样专门搞技术的人将复杂的操作简单化。今天我来跟大家分享一个淘宝2012版旺铺CSS代码在线生成工具。这个工具可以让复杂的CSS代码编写变成简单的可以视化鼠标点击操作，通过工具，不懂任何CSS代码的朋友也可以自由设计出自己要想的导航。先来看一下修改CSS代码后的效果图（通过工具可以随意修改颜色）下面我们一起来学习怎么工具生成CSS代码：第一步：进入CSS导航在线生成工具页面（ http://taobaokaidian.com/tool/dhcss/ 如果不能点击打开，请复制网址到时浏览器中打开），我们先来看一个工具页的结构：工具主要有两部份组成，第一部分是预览区，第二步份是编辑区。第二步：修改颜色。点击编辑区的彩色小方框，可以修改对应区域的颜色。修改的过程中可随时点击“预览”按钮查看修改结果。第三步：获取CSS代码。点击“获取CSS代码”按钮，工具会根据您的设计生成相应的CSS代码。第四步：按装CSS代码。进入店铺装修页面，鼠标移到导航上面，在弹出的文字中点击”编辑“，在弹出的对话框中点”显示设置“。然后把CSS代码粘贴上去即可。到此，我们的个性导航制作完成！ 查看原帖>>
![腿粗的女生穿什么裤子好看 阔腿裤穿搭推荐[图]](/aiimages/%E8%85%BF%E7%B2%97%E7%9A%84%E5%A5%B3%E7%94%9F%E7%A9%BF%E4%BB%80%E4%B9%88%E8%A3%A4%E5%AD%90%E5%A5%BD%E7%9C%8B+%E9%98%94%E8%85%BF%E8%A3%A4%E7%A9%BF%E6%90%AD%E6%8E%A8%E8%8D%90%5B%E5%9B%BE%5D.png)
