工具/材料
创新互联公司是一家集网站制作、成都网站建设、网站页面设计、网站优化SEO优化为一体的专业网站建设公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
notepad++
浏览器
打开Notepad++，先输入个页面框架
！DOCTYPE html
html xmlns=""
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;
}
.jiaoulli { 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; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
添加一个DIV标签，在页面中划分出一个块来，用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
然后使用无序标签ul+样式li 来实现模块。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代码吧，可以参考一下啊，
!DOCTYPE html
html xmlns=""//允许你通过一个网址来识别你的标记
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css实现下拉菜单"
meta name="description" content="搜狗略懂、css分享"
titlecss实现下拉导航栏菜单/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;
}
.jiaoulli { 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; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜单，只需要后边继续添加ul/li即可
特别提示
写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
可以鼠标右击"审查元素"来打开css的样式面板，还可以通过配置workspace来修改css后，直接映射到文件中，对于开发都而言，是能提高开发效率的一种方式。chrome还有一个插件名字叫作liveStyle，也可以做到这个效果，插件可以直接在chrome的应用商店进行下载。
在dreamweaver cc中可以直接创建css文件，或在内面内手写输入css代码定义规则等等。
如果要使用可视化css编辑，可以使用css设计器，在默认的界面下，在软件窗口右侧的活动窗口内就可以找到css设计器。
例如：新建一个html文件，点击css设计器的“源”窗口的“+”号，选择创建css的方式，包括：新建css；附件已有的css或在页面内创建css样式。
点击“选择器“窗口的”+“号，选择body，可以看到下面的”属性“窗口内显示出可以编辑的属性列表，鼠标点击相应的属性就可以选择或填写数值进行编辑了，在编辑的时候在”设计“窗口会显示样式的变化。
最后如果是新建的css文件，保存路径要正确。
FrontPage中:
在“网页”视图中，打开需要应用样式表(CSS)的网页，然后在“格式”菜单上，单击“样式表链接”，打开“链接样式表”对话框，单击“添加”按钮，在打开的“选择样式表”对话框中，选择刚才建立的CSS样式文件，单击“确定”后，即可将其添加在“URL”列表中。如果选中“所有网页”选项，可以将样式文件应用到网站所有网页中，选择“当前网页”只会在当前编辑网页中使用。另外，如果要将样式应用于网页上段落或者文字，首先可以选择要应用样式的文字，然后在工具栏的样式列表框中选择要应用的样式名称即可.
Dreamweaver中:
head
title/title
link
href="你的css文件地址"
rel=stylesheet
type="text/css"
/head
外链与嵌入的区别:
外部
CSS
样式表是一系列存储在一个单独的外部
CSS
(.css)
文件(并非
HTML
文件)中的
CSS
规则。利用文档文件头部分中的链接，该文件被链接到
Web
站点中的一个或多个页面。
一个页面可以外链多个css样式。一个样式表也可以被多个页面共用。但是浏览器要解析两次代码，也就是说增加了一次http请求。
嵌入式CSS
样式表是一系列包含在
HTML
文档文件头部分的
style
标签内的
CSS
规则。
做外链的很多，但是你看百度的首页它就是写在里面的，所以说至于你究竟选择哪种还是具体情况灵活运用吧，不能说哪种绝对就好。
插图： 【窗口大小弹出式菜单】：显示页面的大小，可以将文档窗口的大小调整到预定义或自定义的尺寸，但是在“代码”视图中不可用。 【下载指示器】：显示页面的预计文档大小和估计下载时间。 【编码指示器】：显示当前文档的文本编码。 2.2.4 “属性”面板 “属性”面板是非常重要的面板，主要用于查看和更改所选对象的各种属性，所选的对象不同，显示的属性也将不同。通常情况下，“属性”面板位于文档窗Kl的底部，可以通过双击“属性”使该面板显示或者隐藏，还可以通过单击并拖动的方法移动该面板到文档窗口的其他位置，如图2—6所示。 2.2.5浮动面板 浮动面板组是Dreamweaver操作界面的一大特色，用户可以根据自己的需要选择打开相应的面板和面板组。双击组名称，可以在展开和折叠面板组两种状态之间切换，既方便用户使用，又节省了屏幕空间。这里就以“CSS样式”面板和“插入”面板为例进行介绍。 1.“CSS样式”面板 CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。 （1）在“当前”模式下，“CSS样式”面板将显示3个窗格：“所选内容的摘要”窗格，显示文档中当前所选内容的CSS属性；“规则”窗格，显示所选属性的位置；“属性”窗格，允许用户编辑定义所选规则的CSS属性，如图2-7所示。 （2）在“全部”模式下，“CSS样式”面板显示两个窗格：“所有规则”窗格，显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表；“属性”窗格，可以编辑“所有规则”窗格中任何所选规则的CSS属性。 2. “插入”面板 “插入”面板包含用于创建和插入对象（表格、图像和链接等）的按钮。这些按钮按类别进行组织，用户可以通过从“类别”弹出菜单中选择所需类别来进行切换，分别为：常用、布局、表单、数据、Spry、InContext Editing、文本、收藏夹、颜色图标和隐藏标签，如图2—8所示。若当前文档（女HASP或CFML文档）包含服务器代码时，还会显示其他类别。
工具栏可能自带css背景颜色；可去除改工具栏对应的css背景色
div{background:none;}
如不可自定义修改，可在后面重新写css进行覆盖；
div{background:none;}
css属于从前到后执行顺序，覆盖前面的样式，一定要将css写在后面