纯css下拉菜单编写的二级导航菜单问题？
点击联系发帖人
时间：2013-01-01 14:13
竖向的二级导航菜单代码特效,纯DIV+CSS制作
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/
charset=utf-8" /&
&title&dropdown˵--A CROSS BROWSER
DROP DOWN CASCADING VALIDATING
MENU&/title&
&style type="text/css"&
font-family: arial, sans-
margin:50px 0;
.menu ul {
padding:0;
list-style-type:
.menu ul li {
.menu ul li a, .menu ul li a:visited {
text-align:
text-decoration:
color:#000;
border:1px solid #
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30
font-size:11
.menu ul li ul {
.menu ul li:hover a {
background:#b3ab79;
.menu ul li:hover ul {
.menu ul li:hover ul li a {
background:#faeec7;
color:#000;
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
&!--[if lte IE 6]&
&style type="text/css"&
border-collapse:
padding:0;
.menu ul li a.hide, .menu ul li a:visited.hide {
.menu ul li a:hover {
background:#b3ab79;
.menu ul li a:hover ul {
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
&![endif]--&
&div class="menu"&
&li&&a class="hide"
href="../menu/index.html"&DEMOS&/a&
&!--[if lte IE 6]&
href="../menu/index.html"&DEMOS
&table&&tr&&td&
&![endif]--&
href="../menu/zero_dollars.html" title="The zero dollar ads
page"&zero
dollars&/a&&/li&
href="../menu/embed.html" title="Wrapping text around
images"&wrapping
text&/a&&/li&
href="../menu/form.html" title="Styling
forms"&styled
form&/a&&/li&
href="../menu/nodots.html" title="Removing active/focus
borders"&active
focus&/a&&/li&
href="../menu/shadow_boxing.html" title="Multi-position drop
shadow"&shadow
boxing&/a&&/li&
href="../menu/old_master.html" title="Image Map for detailed
information"&image
map&/a&&/li&
href="../menu/bodies.html" title="fun with background
images"&fun
backgrounds&/a&&/li&
href="../menu/fade_scroll.html" title="fade-out
scrolling"&fade
scrolling&/a&&/li&
href="../menu/em_images.html" title="em size images
compared"&em sized
images&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="index.html"&MENUS&/a&
&!--[if lte IE 6]&
&a href="index.html"&MENUS
&table&&tr&&td&
&![endif]--&
href="spies.html" title="a coded list of
spies"&spies
menu&/a&&/li&
href="vertical.html" title="a horizontal vertical
menu"&vertical
menu&/a&&/li&
href="expand.html" title="an enlarging unordered
list"&enlarging
list&/a&&/li&
href="enlarge.html" title="an unordered list with link
images"&link
images&/a&&/li&
href="cross.html" title="non-rectangular
links"&non-rectangular&/a&&/li&
href="jigsaw.html" title="jigsaw links"&jigsaw
links&/a&&/li&
href="circles.html" title="circular links"&circular
links&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../layouts/index.html"&LAYOUTS&/a&
&!--[if lte IE 6]&
href="../layouts/index.html"&LAYOUTS
&table&&tr&&td&
&![endif]--&
href="../layouts/bodyfix.html" title="Cross browser fixed
layout"&Fixed
1&/a&&/li&
href="../layouts/body2.html" title="Cross browser fixed
layout"&Fixed
2&/a&&/li&
href="../layouts/body4.html" title="Cross browser fixed
layout"&Fixed
3&/a&&/li&
href="../layouts/body5.html" title="Cross browser fixed
layout"&Fixed
4&/a&&/li&
href="../layouts/minimum.html" title="A simple minimum width
layout"&minimum
width&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../boxes/index.html"&BOXES&/a&
&!--[if lte IE 6]&
href="../boxes/index.html"&BOXES
&table&&tr&&td&
&![endif]--&
href="spies.html" title="a coded list of
spies"&spies
menu&/a&&/li&
href="vertical.html" title="a horizontal vertical
menu"&vertical
menu&/a&&/li&
href="expand.html" title="an enlarging unordered
list"&enlarging
list&/a&&/li&
href="enlarge.html" title="an unordered list with link
images"&link
images&/a&&/li&
href="cross.html" title="non-rectangular
links"&non-rectangular&/a&&/li&
href="jigsaw.html" title="jigsaw links"&jigsaw
links&/a&&/li&
href="circles.html" title="circular links"&circular
links&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../mozilla/index.html"&MOZILLA&/a&
&!--[if lte IE 6]&
href="../mozilla/index.html"&MOZILLA
&table&&tr&&td&
&![endif]--&
href="../mozilla/dropdown.html" title="A drop down
menu"&drop down
menu&/a&&/li&
href="../mozilla/cascade.html" title="A cascading
menu"&cascading
menu&/a&&/li&
href="../mozilla/content.html" title="Using
content:"&content:&/a&&/li&
href="../mozilla/moxbox.html" title=":hover applied to a
div"&mozzie
box&/a&&/li&
href="../mozilla/rainbow.html" title="I can build a
rainbow"&rainbow
box&/a&&/li&
href="../mozilla/snooker.html" title="Snooker
cue"&snooker
cue&/a&&/li&
href="../mozilla/target.html" title="Target
Practise"&target
practise&/a&&/li&
href="../mozilla/splittext.html" title="Two tone
headings"&two tone
headings&/a&&/li&
href="../mozilla/shadow_text.html" title="Shadow
text"&shadow
text&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../ie/index.html"&EXPLORER&/a&
&!--[if lte IE 6]&
href="../ie/index.html"&EXPLORER
&table&&tr&&td&
&![endif]--&
href="../ie/exampleone.html" title="Example
one"&example
one&/a&&/li&
href="../ie/weft.html" title="Weft fonts"&weft
fonts&/a&&/li&
href="../ie/exampletwo.html" title="Vertical
align"&vertical
align&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../opacity/index.html"&OPACITY&/a&
&!--[if lte IE 6]&
href="../opacity/index.html"&OPACITY
&table&&tr&&td&
&![endif]--&
href="../opacity/colours.html" title="colour
wheel"&opaque
colours&/a&&/li&
href="../opacity/picturemenu.html" title="a menu using
opacity"&opaque
menu&/a&&/li&
href="../opacity/png.html" title="partial
opacity"&partial
opacity&/a&&/li&
href="../opacity/png2.html" title="partial opacity
II"&partial opacity
II&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&!-- clear the floats if required
&div class="clear"&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。&&&&CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位…………&&&&&&&&&&&&&&&&&&&&&&&&&&&【】
A：表现和内容相分离
B：提高搜索引擎对网页的索引效率
C：提高页面浏览速度
D:易于维护和改版
十天精通DIV+CSS
栏目策划: Chinaz编辑部 整理制作：令狐孤 李典新 申瑞瑞 水色皇朝
资讯热线: 2965133
& CopyRight , , Inc. All Rights Reserved
资讯热线: 2965133
增值电信业务经营许可证闽B2-号&&&发布日期
： 00:00:00
纯CSS制作的超酷的网站横向导航菜单(网页特效)
喜欢【】票
讨厌【】票
文章统计-Library material
最热标签-Hot Tags
热门导航-Column navigation
关注我们-About Us-Thank you for visit如何用div+css写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)跪求---
如何用div+css写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)跪求---
如题，在线等
给你个例子参考
================
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & &html xmlns=& &head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU&/title&&style&/* common styling *//* set up the overall width of the menu div, the font and the margins */.menu {font-family: arial, sans-width:750margin:0;margin:50px 0;}/* remove the bullets and set the margin and padding to zero for the unordered list */.menu ul {padding:0;margin:0;list-style-type:}/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */.menu ul li {float:position:}/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */.menu ul li a, .menu ul li a:visited {display:text-align:text-decoration:width:104height:30color:#000;border:1px solid #border-width:1px 1px 0 0;background:#c9c9a7;line-height:30font-size:11}/* make the dropdown ul invisible */.menu ul li ul {display:}/* specific to non IE browsers *//* set the background and foreground color of the main menu li on hover */.menu ul li:hover a {color:#background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li:hover ul {display:position:top:31left:0;width:105}/* style the background and foreground color of the submenu links */.menu ul li:hover ul li a {display:background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li:hover ul li a:hover {background:#dfc184;color:#000;}&/style&&!--[if lte IE 6]&&style&/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover *//* Get rid of any default &span href="tag.php?name=tab" onclick="tagshow(event)" class="t_tag"&tab&/span&le style */table {border-collapse:margin:0;padding:0;}/* ignore the link used by 'other browsers' */.menu ul li a.hide, .menu ul li a:visited.hide {display:}/* set the background and foreground color of the main menu link on hover */.menu ul li a:hover {color:#background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li a:hover ul {display:position:top:32left:0;width:105}/* style the background and foreground color of the submenu links */.menu ul li a:hover ul li a {background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li a:hover ul li a:hover {background:#dfc184;color:#000;}&/style&&![endif]--&&/head&&body&&div class="menu"&&ul&&li&&a class="hide" href="../menu/index.html"&DEMOS&/a&&!--[if lte IE 6]&&a href="../menu/index.html"&DEMOS&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&The zero dollar ads page&&zero dollars&/a&&/li&&li&&a href=& & title=&Wrapping text around images&&wrapping text&/a&&/li&&li&&a href=& & title=&Styling forms&&styled form&/a&&/li&&li&&a href=& & title=&Removing active/focus borders&&active focus&/a&&/li&&li&&a href=& & title=&Multi-position drop shadow&&shadow boxing&/a&&/li&&li&&a href=& & title=&Image Map for detailed information&&image map&/a&&/li&&li&&a href=& & title=&fun with background images&&fun backgrounds&/a&&/li&&li&&a href=& & title=&fade-out scrolling&&fade scrolling&/a&&/li&&li&&a href=& & title=&em size images compared&&em sized images&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="index.html"&MENUS&/a&&!--[if lte IE 6]&&a href="index.html"&MENUS&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&a coded list of spies&&spies menu&/a&&/li&&li&&a href=& & title=&a horizontal vertical menu&&vertical menu&/a&&/li&&li&&a href=& & title=&an enlarging unordered list&&enlarging list&/a&&/li&&li&&a href=& & title=&an unordered list with link images&&link images&/a&&/li&&li&&a href=& & title=&non-rectangular links&&non-rectangular&/a&&/li&&li&&a href=& & title=&jigsaw links&&jigsaw links&/a&&/li&&li&&a href=& & title=&circular links&&circular links&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../layouts/index.html"&LAYOUTS&/a&&!--[if lte IE 6]&&a href="../layouts/index.html"&LAYOUTS&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../boxes/index.html"&BOXES&/a&&!--[if lte IE 6]&&a href="../boxes/index.html"&BOXES&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../mozilla/index.html"&MOZILLA&/a&&!--[if lte IE 6]&&a href="../mozilla/index.html"&MOZILLA&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../ie/index.html"&EXPLORER&/a&&!--[if lte IE 6]&&a href="../ie/index.html"&EXPLORER&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../opacity/index.html"&OPACITY&/a&&!--[if lte IE 6]&&a href="../opacity/index.html"&OPACITY&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&/ul&&!-- clear the floats if required --&&div class="clear"& &/div&&/div&&/body&&/html&
那个一般都是用div与js相结合的方法吧，具体不太清楚。
这个上面原来导航也是下拉，不过用的是js，感觉对seo不太友好我就把那个功能给去掉了，导航栏尽量不要搞的太花哨了。
大哥，你不是白说了嘛
你可以去搜一下，导航，有很多的。
没有阿，导航就是没搜着，我才问的，你有不？
先给你div的代码，然后下面的是css，最后是javascuipt函数代码。记住要最好把css文件采用外部调用的方式，能缩小网页体积，加快打开的速度。
你把这段div加入到body之间：
&&& &&& &&&&&
&&&&&&& &&&&&&& &&&&& &&& &&& 化&&&&&
&&&&&&& &&&&&&& &&&&& &&& &&& &&&&&
&&&&&&& &&&&&&& &&&&& &&& &&& &&& &&&&&
&&&&&&& &&&&&&& &&&&& &&& &
然后下面的是css，记住要最好把css文件采用外部调用的方式，能缩小网页体积，加快打开的速度。
body{margin-top:100}.preload1 {background: url(/teixiao/UploadFiles_/26668.gif);}.preload2 {background: url(/teixiao/UploadFiles_/27331.gif);}#nav {padding:0; margin:0; list-style: height:38 background:#fff url(/teixiao/UploadFiles_/27301.gif) repeat-x; position: z-index:500; font-family:arial, verdana, sans-}#nav li.top {display: float: height:38}#nav li a.top_link {display: float: height:35 line-height:33 color:# text-decoration: font-size:11 font-weight: padding:0 0 0 12 cursor:background: url(/teixiao/UploadFiles_/27301.gif);}#nav li a.top_link span {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27301.gif) right top no-}#nav li a.top_link span.down {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27825.gif) no-}#nav li:hover a.top_link {color:# background: url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span {background:url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span.down {background:url(/teixiao/UploadFiles_/27331.gif) no-}/* Default list styling */#nav li:hover {position: z-index:200;}#nav li:hover ul.sub{left:1 top:38 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 height: z-index:300;}#nav li:hover ul.sub li{display: height:20 position: float: width:90 font-weight:}#nav li:hover ul.sub li a{display: font-size:11 height:18 width:88 line-height:18 text-indent:5 color:#000; text-decoration:border:1px solid #9bdae9;}#nav li ul.sub li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no-}#nav li:hover ul.sub li a:hover {background:#00b2 color:# border-color:#}#nav li:hover ul.sub li a.fly:hover{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:#}#nav li:hover li:hover ul,#nav li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover li:hover ul{left:90 top:-4 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 z-index:400; height:}#nav ul, #nav li:hover ul ul,#nav li:hover li:hover ul ul,#nav li:hover li:hover li:hover ul ul,#nav li:hover li:hover li:hover li:hover ul ul{position: left:-9999 top:-9999 width:0; height:0; margin:0; padding:0; list-style:}#nav li:hover li:hover a.fly,#nav li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover li:hover a.fly{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:# border-color:#} #nav li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li:hover li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no- color:#000; border-color:#9bdae9;}
然后下面的是javascript，记住要最好把javascript文件也采用外部调用的方式，能缩小网页体积，也不认识。
stuHover = function() {&var cssR&var newS&for (var i = 0; i & document.styleSheets. i++)& for (var x = 0; x & document.styleSheets[i].rules. x++)&& {&& cssRule = document.styleSheets[i].rules[x];&& if (cssRule.selectorText.indexOf(&LI:hover&) != -1)&& {&&&& newSelector = cssRule.selectorText.replace(/LI:hover/gi, &LI.iehover&);&&& document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);&& }& }&var getElm = document.getElementById(&nav&).getElementsByTagName(&LI&);&for (var i=0; i& getElm[i].onmouseover=function() {&& this.className+=& iehover&;& }& getElm[i].onmouseout=function() {&& this.className=this.className.replace(new RegExp(& iehover\\b&), &&);& }&}}if (window.attachEvent) window.attachEvent(&onload&, stuHover);现在可以了吧？再不行我就没招了。
其他回答 (2)
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & &html xmlns=& &head&&title&蓝色二级下拉导航菜单&/title&&meta http-equiv="content-Type" content="text/charset=gb2312"&&!--把下面代码加到&head&与&/head&之间--&&style type="text/css"&body{margin-top:100}.preload1 {background: url(/teixiao/UploadFiles_/26668.gif);}.preload2 {background: url(/teixiao/UploadFiles_/27331.gif);}#nav {padding:0; margin:0; list-style: height:38 background:#fff url(/teixiao/UploadFiles_/27301.gif) repeat-x; position: z-index:500; font-family:arial, verdana, sans-}#nav li.top {display: float: height:38}#nav li a.top_link {display: float: height:35 line-height:33 color:# text-decoration: font-size:11 font-weight: padding:0 0 0 12 cursor:background: url(/teixiao/UploadFiles_/27301.gif);}#nav li a.top_link span {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27301.gif) right top no-}#nav li a.top_link span.down {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27825.gif) no-}#nav li:hover a.top_link {color:# background: url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span {background:url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span.down {background:url(/teixiao/UploadFiles_/27331.gif) no-}/* Default list styling */#nav li:hover {position: z-index:200;}#nav li:hover ul.sub{left:1 top:38 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 height: z-index:300;}#nav li:hover ul.sub li{display: height:20 position: float: width:90 font-weight:}#nav li:hover ul.sub li a{display: font-size:11 height:18 width:88 line-height:18 text-indent:5 color:#000; text-decoration:border:1px solid #9bdae9;}#nav li ul.sub li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no-}#nav li:hover ul.sub li a:hover {background:#00b2 color:# border-color:#}#nav li:hover ul.sub li a.fly:hover{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:#}#nav li:hover li:hover ul,#nav li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover li:hover ul{left:90 top:-4 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 z-index:400; height:}#nav ul, #nav li:hover ul ul,#nav li:hover li:hover ul ul,#nav li:hover li:hover li:hover ul ul,#nav li:hover li:hover li:hover li:hover ul ul{position: left:-9999 top:-9999 width:0; height:0; margin:0; padding:0; list-style:}#nav li:hover li:hover a.fly,#nav li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover li:hover a.fly{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:# border-color:#} #nav li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li:hover li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no- color:#000; border-color:#9bdae9;} &/style&&script type="text/javascript"&stuHover = function() {&var cssR&var newS&for (var i = 0; i & document.styleSheets. i++)& for (var x = 0; x & document.styleSheets[i].rules. x++)&& {&& cssRule = document.styleSheets[i].rules[x];&& if (cssRule.selectorText.indexOf("LI:hover") != -1)&& {&&&& newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");&&& document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);&& }& }&var getElm = document.getElementById("nav").getElementsByTagName("LI");&for (var i=0; i&getElm. i++) {& getElm[i].onmouseover=function() {&& this.className+=" iehover";& }& getElm[i].onmouseout=function() {&& this.className=this.className.replace(new RegExp(" iehover\\b"), "");& }&}}if (window.attachEvent) window.attachEvent("onload", stuHover);&/script&&/head&&body&& &!--把下面代码加到&body&与&/body&之间--&&div id="navbar"&& &ul id="nav"&&&& &li class="top"&&a href="#" class="top_link"&&span&首页&/span&&/a&&/li&&&& &li class="top"&&a href="#" id="services" class="top_link"&&span class="down"&关于我们&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&公司介绍&/a&&/li&&&&&&&& &li&&a href="#"&组织结构&/a&&/li&&&&&& &/ul&&&& &/li&&&& &li class="top"&&a href="#" id="services" class="top_link"&&span class="down"&公司文化&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&企业文化&/a&&/li&&&&&&&& &li&&a href="#"&团队介绍&/a&&/li&&&&&& &/ul&&&& &/li&&&& &li class="top"&&a href="#" id="shop" class="top_link"&&span class="down"&视频资源&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&经典案例&/a&&/li&&&&&&&& &li&&a href="#"&服务范围&/a&&/li&&&&&& &/ul&&&& &/li&&&& &li class="top"&&a href="#" id="privacy" class="top_link"&&span&合作伙伴&/span&&/a&&/li&&&& &li class="top"&&a href="#" id="shop" class="top_link"&&span class="down"&联系我们&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&联系方式&/a&&/li&&&&&&&& &li&&a href="#"&招聘信息&/a&&/li&&&&&& &/ul&&&& &/li&& &/ul&&/div&&/body&&/html&
&
你可以这么改：给dd加一个样式#dao li dl dd这样你必须给li标签限定宽度再在#dao li中加width:100改为#dao li{float:width:100｝试试看 希望有用
等待您来回答
网页制作领域专家}
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/
charset=utf-8" /&
&title&dropdown˵--A CROSS BROWSER
DROP DOWN CASCADING VALIDATING
MENU&/title&
&style type="text/css"&
font-family: arial, sans-
margin:50px 0;
.menu ul {
padding:0;
list-style-type:
.menu ul li {
.menu ul li a, .menu ul li a:visited {
text-align:
text-decoration:
color:#000;
border:1px solid #
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30
font-size:11
.menu ul li ul {
.menu ul li:hover a {
background:#b3ab79;
.menu ul li:hover ul {
.menu ul li:hover ul li a {
background:#faeec7;
color:#000;
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
&!--[if lte IE 6]&
&style type="text/css"&
border-collapse:
padding:0;
.menu ul li a.hide, .menu ul li a:visited.hide {
.menu ul li a:hover {
background:#b3ab79;
.menu ul li a:hover ul {
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
&![endif]--&
&div class="menu"&
&li&&a class="hide"
href="../menu/index.html"&DEMOS&/a&
&!--[if lte IE 6]&
href="../menu/index.html"&DEMOS
&table&&tr&&td&
&![endif]--&
href="../menu/zero_dollars.html" title="The zero dollar ads
page"&zero
dollars&/a&&/li&
href="../menu/embed.html" title="Wrapping text around
images"&wrapping
text&/a&&/li&
href="../menu/form.html" title="Styling
forms"&styled
form&/a&&/li&
href="../menu/nodots.html" title="Removing active/focus
borders"&active
focus&/a&&/li&
href="../menu/shadow_boxing.html" title="Multi-position drop
shadow"&shadow
boxing&/a&&/li&
href="../menu/old_master.html" title="Image Map for detailed
information"&image
map&/a&&/li&
href="../menu/bodies.html" title="fun with background
images"&fun
backgrounds&/a&&/li&
href="../menu/fade_scroll.html" title="fade-out
scrolling"&fade
scrolling&/a&&/li&
href="../menu/em_images.html" title="em size images
compared"&em sized
images&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="index.html"&MENUS&/a&
&!--[if lte IE 6]&
&a href="index.html"&MENUS
&table&&tr&&td&
&![endif]--&
href="spies.html" title="a coded list of
spies"&spies
menu&/a&&/li&
href="vertical.html" title="a horizontal vertical
menu"&vertical
menu&/a&&/li&
href="expand.html" title="an enlarging unordered
list"&enlarging
list&/a&&/li&
href="enlarge.html" title="an unordered list with link
images"&link
images&/a&&/li&
href="cross.html" title="non-rectangular
links"&non-rectangular&/a&&/li&
href="jigsaw.html" title="jigsaw links"&jigsaw
links&/a&&/li&
href="circles.html" title="circular links"&circular
links&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../layouts/index.html"&LAYOUTS&/a&
&!--[if lte IE 6]&
href="../layouts/index.html"&LAYOUTS
&table&&tr&&td&
&![endif]--&
href="../layouts/bodyfix.html" title="Cross browser fixed
layout"&Fixed
1&/a&&/li&
href="../layouts/body2.html" title="Cross browser fixed
layout"&Fixed
2&/a&&/li&
href="../layouts/body4.html" title="Cross browser fixed
layout"&Fixed
3&/a&&/li&
href="../layouts/body5.html" title="Cross browser fixed
layout"&Fixed
4&/a&&/li&
href="../layouts/minimum.html" title="A simple minimum width
layout"&minimum
width&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../boxes/index.html"&BOXES&/a&
&!--[if lte IE 6]&
href="../boxes/index.html"&BOXES
&table&&tr&&td&
&![endif]--&
href="spies.html" title="a coded list of
spies"&spies
menu&/a&&/li&
href="vertical.html" title="a horizontal vertical
menu"&vertical
menu&/a&&/li&
href="expand.html" title="an enlarging unordered
list"&enlarging
list&/a&&/li&
href="enlarge.html" title="an unordered list with link
images"&link
images&/a&&/li&
href="cross.html" title="non-rectangular
links"&non-rectangular&/a&&/li&
href="jigsaw.html" title="jigsaw links"&jigsaw
links&/a&&/li&
href="circles.html" title="circular links"&circular
links&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../mozilla/index.html"&MOZILLA&/a&
&!--[if lte IE 6]&
href="../mozilla/index.html"&MOZILLA
&table&&tr&&td&
&![endif]--&
href="../mozilla/dropdown.html" title="A drop down
menu"&drop down
menu&/a&&/li&
href="../mozilla/cascade.html" title="A cascading
menu"&cascading
menu&/a&&/li&
href="../mozilla/content.html" title="Using
content:"&content:&/a&&/li&
href="../mozilla/moxbox.html" title=":hover applied to a
div"&mozzie
box&/a&&/li&
href="../mozilla/rainbow.html" title="I can build a
rainbow"&rainbow
box&/a&&/li&
href="../mozilla/snooker.html" title="Snooker
cue"&snooker
cue&/a&&/li&
href="../mozilla/target.html" title="Target
Practise"&target
practise&/a&&/li&
href="../mozilla/splittext.html" title="Two tone
headings"&two tone
headings&/a&&/li&
href="../mozilla/shadow_text.html" title="Shadow
text"&shadow
text&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../ie/index.html"&EXPLORER&/a&
&!--[if lte IE 6]&
href="../ie/index.html"&EXPLORER
&table&&tr&&td&
&![endif]--&
href="../ie/exampleone.html" title="Example
one"&example
one&/a&&/li&
href="../ie/weft.html" title="Weft fonts"&weft
fonts&/a&&/li&
href="../ie/exampletwo.html" title="Vertical
align"&vertical
align&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&li&&a class="hide"
href="../opacity/index.html"&OPACITY&/a&
&!--[if lte IE 6]&
href="../opacity/index.html"&OPACITY
&table&&tr&&td&
&![endif]--&
href="../opacity/colours.html" title="colour
wheel"&opaque
colours&/a&&/li&
href="../opacity/picturemenu.html" title="a menu using
opacity"&opaque
menu&/a&&/li&
href="../opacity/png.html" title="partial
opacity"&partial
opacity&/a&&/li&
href="../opacity/png2.html" title="partial opacity
II"&partial opacity
II&/a&&/li&
&!--[if lte IE 6]&
&/td&&/tr&&/table&
&![endif]--&
&!-- clear the floats if required
&div class="clear"&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。&&&&CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位…………&&&&&&&&&&&&&&&&&&&&&&&&&&&【】
A：表现和内容相分离
B：提高搜索引擎对网页的索引效率
C：提高页面浏览速度
D:易于维护和改版
十天精通DIV+CSS
栏目策划: Chinaz编辑部 整理制作：令狐孤 李典新 申瑞瑞 水色皇朝
资讯热线: 2965133
& CopyRight , , Inc. All Rights Reserved
资讯热线: 2965133
增值电信业务经营许可证闽B2-号&&&发布日期
： 00:00:00
纯CSS制作的超酷的网站横向导航菜单(网页特效)
喜欢【】票
讨厌【】票
文章统计-Library material
最热标签-Hot Tags
热门导航-Column navigation
关注我们-About Us-Thank you for visit如何用div+css写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)跪求---
如何用div+css写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)跪求---
如题，在线等
给你个例子参考
================
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & &html xmlns=& &head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU&/title&&style&/* common styling *//* set up the overall width of the menu div, the font and the margins */.menu {font-family: arial, sans-width:750margin:0;margin:50px 0;}/* remove the bullets and set the margin and padding to zero for the unordered list */.menu ul {padding:0;margin:0;list-style-type:}/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */.menu ul li {float:position:}/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */.menu ul li a, .menu ul li a:visited {display:text-align:text-decoration:width:104height:30color:#000;border:1px solid #border-width:1px 1px 0 0;background:#c9c9a7;line-height:30font-size:11}/* make the dropdown ul invisible */.menu ul li ul {display:}/* specific to non IE browsers *//* set the background and foreground color of the main menu li on hover */.menu ul li:hover a {color:#background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li:hover ul {display:position:top:31left:0;width:105}/* style the background and foreground color of the submenu links */.menu ul li:hover ul li a {display:background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li:hover ul li a:hover {background:#dfc184;color:#000;}&/style&&!--[if lte IE 6]&&style&/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover *//* Get rid of any default &span href="tag.php?name=tab" onclick="tagshow(event)" class="t_tag"&tab&/span&le style */table {border-collapse:margin:0;padding:0;}/* ignore the link used by 'other browsers' */.menu ul li a.hide, .menu ul li a:visited.hide {display:}/* set the background and foreground color of the main menu link on hover */.menu ul li a:hover {color:#background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li a:hover ul {display:position:top:32left:0;width:105}/* style the background and foreground color of the submenu links */.menu ul li a:hover ul li a {background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li a:hover ul li a:hover {background:#dfc184;color:#000;}&/style&&![endif]--&&/head&&body&&div class="menu"&&ul&&li&&a class="hide" href="../menu/index.html"&DEMOS&/a&&!--[if lte IE 6]&&a href="../menu/index.html"&DEMOS&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&The zero dollar ads page&&zero dollars&/a&&/li&&li&&a href=& & title=&Wrapping text around images&&wrapping text&/a&&/li&&li&&a href=& & title=&Styling forms&&styled form&/a&&/li&&li&&a href=& & title=&Removing active/focus borders&&active focus&/a&&/li&&li&&a href=& & title=&Multi-position drop shadow&&shadow boxing&/a&&/li&&li&&a href=& & title=&Image Map for detailed information&&image map&/a&&/li&&li&&a href=& & title=&fun with background images&&fun backgrounds&/a&&/li&&li&&a href=& & title=&fade-out scrolling&&fade scrolling&/a&&/li&&li&&a href=& & title=&em size images compared&&em sized images&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="index.html"&MENUS&/a&&!--[if lte IE 6]&&a href="index.html"&MENUS&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&a coded list of spies&&spies menu&/a&&/li&&li&&a href=& & title=&a horizontal vertical menu&&vertical menu&/a&&/li&&li&&a href=& & title=&an enlarging unordered list&&enlarging list&/a&&/li&&li&&a href=& & title=&an unordered list with link images&&link images&/a&&/li&&li&&a href=& & title=&non-rectangular links&&non-rectangular&/a&&/li&&li&&a href=& & title=&jigsaw links&&jigsaw links&/a&&/li&&li&&a href=& & title=&circular links&&circular links&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../layouts/index.html"&LAYOUTS&/a&&!--[if lte IE 6]&&a href="../layouts/index.html"&LAYOUTS&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../boxes/index.html"&BOXES&/a&&!--[if lte IE 6]&&a href="../boxes/index.html"&BOXES&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../mozilla/index.html"&MOZILLA&/a&&!--[if lte IE 6]&&a href="../mozilla/index.html"&MOZILLA&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../ie/index.html"&EXPLORER&/a&&!--[if lte IE 6]&&a href="../ie/index.html"&EXPLORER&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&li&&a class="hide" href="../opacity/index.html"&OPACITY&/a&&!--[if lte IE 6]&&a href="../opacity/index.html"&OPACITY&table&&tr&&td&&![endif]--&&ul&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 1&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 2&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 3&/a&&/li&&li&&a href=& & title=&Cross browser fixed layout&&Fixed 4&/a&&/li&&li&&a href=& & title=&A simple minimum width layout&&minimum width&/a&&/li&&/ul&&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&&/li&&/ul&&!-- clear the floats if required --&&div class="clear"& &/div&&/div&&/body&&/html&
那个一般都是用div与js相结合的方法吧，具体不太清楚。
这个上面原来导航也是下拉，不过用的是js，感觉对seo不太友好我就把那个功能给去掉了，导航栏尽量不要搞的太花哨了。
大哥，你不是白说了嘛
你可以去搜一下，导航，有很多的。
没有阿，导航就是没搜着，我才问的，你有不？
先给你div的代码，然后下面的是css，最后是javascuipt函数代码。记住要最好把css文件采用外部调用的方式，能缩小网页体积，加快打开的速度。
你把这段div加入到body之间：
&&& &&& &&&&&
&&&&&&& &&&&&&& &&&&& &&& &&& 化&&&&&
&&&&&&& &&&&&&& &&&&& &&& &&& &&&&&
&&&&&&& &&&&&&& &&&&& &&& &&& &&& &&&&&
&&&&&&& &&&&&&& &&&&& &&& &
然后下面的是css，记住要最好把css文件采用外部调用的方式，能缩小网页体积，加快打开的速度。
body{margin-top:100}.preload1 {background: url(/teixiao/UploadFiles_/26668.gif);}.preload2 {background: url(/teixiao/UploadFiles_/27331.gif);}#nav {padding:0; margin:0; list-style: height:38 background:#fff url(/teixiao/UploadFiles_/27301.gif) repeat-x; position: z-index:500; font-family:arial, verdana, sans-}#nav li.top {display: float: height:38}#nav li a.top_link {display: float: height:35 line-height:33 color:# text-decoration: font-size:11 font-weight: padding:0 0 0 12 cursor:background: url(/teixiao/UploadFiles_/27301.gif);}#nav li a.top_link span {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27301.gif) right top no-}#nav li a.top_link span.down {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27825.gif) no-}#nav li:hover a.top_link {color:# background: url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span {background:url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span.down {background:url(/teixiao/UploadFiles_/27331.gif) no-}/* Default list styling */#nav li:hover {position: z-index:200;}#nav li:hover ul.sub{left:1 top:38 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 height: z-index:300;}#nav li:hover ul.sub li{display: height:20 position: float: width:90 font-weight:}#nav li:hover ul.sub li a{display: font-size:11 height:18 width:88 line-height:18 text-indent:5 color:#000; text-decoration:border:1px solid #9bdae9;}#nav li ul.sub li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no-}#nav li:hover ul.sub li a:hover {background:#00b2 color:# border-color:#}#nav li:hover ul.sub li a.fly:hover{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:#}#nav li:hover li:hover ul,#nav li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover li:hover ul{left:90 top:-4 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 z-index:400; height:}#nav ul, #nav li:hover ul ul,#nav li:hover li:hover ul ul,#nav li:hover li:hover li:hover ul ul,#nav li:hover li:hover li:hover li:hover ul ul{position: left:-9999 top:-9999 width:0; height:0; margin:0; padding:0; list-style:}#nav li:hover li:hover a.fly,#nav li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover li:hover a.fly{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:# border-color:#} #nav li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li:hover li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no- color:#000; border-color:#9bdae9;}
然后下面的是javascript，记住要最好把javascript文件也采用外部调用的方式，能缩小网页体积，也不认识。
stuHover = function() {&var cssR&var newS&for (var i = 0; i & document.styleSheets. i++)& for (var x = 0; x & document.styleSheets[i].rules. x++)&& {&& cssRule = document.styleSheets[i].rules[x];&& if (cssRule.selectorText.indexOf(&LI:hover&) != -1)&& {&&&& newSelector = cssRule.selectorText.replace(/LI:hover/gi, &LI.iehover&);&&& document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);&& }& }&var getElm = document.getElementById(&nav&).getElementsByTagName(&LI&);&for (var i=0; i& getElm[i].onmouseover=function() {&& this.className+=& iehover&;& }& getElm[i].onmouseout=function() {&& this.className=this.className.replace(new RegExp(& iehover\\b&), &&);& }&}}if (window.attachEvent) window.attachEvent(&onload&, stuHover);现在可以了吧？再不行我就没招了。
其他回答 (2)
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & &html xmlns=& &head&&title&蓝色二级下拉导航菜单&/title&&meta http-equiv="content-Type" content="text/charset=gb2312"&&!--把下面代码加到&head&与&/head&之间--&&style type="text/css"&body{margin-top:100}.preload1 {background: url(/teixiao/UploadFiles_/26668.gif);}.preload2 {background: url(/teixiao/UploadFiles_/27331.gif);}#nav {padding:0; margin:0; list-style: height:38 background:#fff url(/teixiao/UploadFiles_/27301.gif) repeat-x; position: z-index:500; font-family:arial, verdana, sans-}#nav li.top {display: float: height:38}#nav li a.top_link {display: float: height:35 line-height:33 color:# text-decoration: font-size:11 font-weight: padding:0 0 0 12 cursor:background: url(/teixiao/UploadFiles_/27301.gif);}#nav li a.top_link span {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27301.gif) right top no-}#nav li a.top_link span.down {float: display: padding:0 24px 0 12 height:35 background: url(/teixiao/UploadFiles_/27825.gif) no-}#nav li:hover a.top_link {color:# background: url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span {background:url(/teixiao/UploadFiles_/26668.gif) no-}#nav li:hover a.top_link span.down {background:url(/teixiao/UploadFiles_/27331.gif) no-}/* Default list styling */#nav li:hover {position: z-index:200;}#nav li:hover ul.sub{left:1 top:38 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 height: z-index:300;}#nav li:hover ul.sub li{display: height:20 position: float: width:90 font-weight:}#nav li:hover ul.sub li a{display: font-size:11 height:18 width:88 line-height:18 text-indent:5 color:#000; text-decoration:border:1px solid #9bdae9;}#nav li ul.sub li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no-}#nav li:hover ul.sub li a:hover {background:#00b2 color:# border-color:#}#nav li:hover ul.sub li a.fly:hover{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:#}#nav li:hover li:hover ul,#nav li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover li:hover ul{left:90 top:-4 background: #9bdae9; padding:3 border:1px solid #00b2 white-space: width:90 z-index:400; height:}#nav ul, #nav li:hover ul ul,#nav li:hover li:hover ul ul,#nav li:hover li:hover li:hover ul ul,#nav li:hover li:hover li:hover li:hover ul ul{position: left:-9999 top:-9999 width:0; height:0; margin:0; padding:0; list-style:}#nav li:hover li:hover a.fly,#nav li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover li:hover a.fly{background:#00b2fe url(/teixiao/UploadFiles_/27835.gif) 80px 6px no- color:# border-color:#} #nav li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li:hover li a.fly{background:#9bdae9 url(/teixiao/UploadFiles_/27827.gif) 80px 6px no- color:#000; border-color:#9bdae9;} &/style&&script type="text/javascript"&stuHover = function() {&var cssR&var newS&for (var i = 0; i & document.styleSheets. i++)& for (var x = 0; x & document.styleSheets[i].rules. x++)&& {&& cssRule = document.styleSheets[i].rules[x];&& if (cssRule.selectorText.indexOf("LI:hover") != -1)&& {&&&& newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");&&& document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);&& }& }&var getElm = document.getElementById("nav").getElementsByTagName("LI");&for (var i=0; i&getElm. i++) {& getElm[i].onmouseover=function() {&& this.className+=" iehover";& }& getElm[i].onmouseout=function() {&& this.className=this.className.replace(new RegExp(" iehover\\b"), "");& }&}}if (window.attachEvent) window.attachEvent("onload", stuHover);&/script&&/head&&body&& &!--把下面代码加到&body&与&/body&之间--&&div id="navbar"&& &ul id="nav"&&&& &li class="top"&&a href="#" class="top_link"&&span&首页&/span&&/a&&/li&&&& &li class="top"&&a href="#" id="services" class="top_link"&&span class="down"&关于我们&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&公司介绍&/a&&/li&&&&&&&& &li&&a href="#"&组织结构&/a&&/li&&&&&& &/ul&&&& &/li&&&& &li class="top"&&a href="#" id="services" class="top_link"&&span class="down"&公司文化&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&企业文化&/a&&/li&&&&&&&& &li&&a href="#"&团队介绍&/a&&/li&&&&&& &/ul&&&& &/li&&&& &li class="top"&&a href="#" id="shop" class="top_link"&&span class="down"&视频资源&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&经典案例&/a&&/li&&&&&&&& &li&&a href="#"&服务范围&/a&&/li&&&&&& &/ul&&&& &/li&&&& &li class="top"&&a href="#" id="privacy" class="top_link"&&span&合作伙伴&/span&&/a&&/li&&&& &li class="top"&&a href="#" id="shop" class="top_link"&&span class="down"&联系我们&/span&&/a&&&&&& &ul class="sub"&&&&&&&& &li&&a href="#"&联系方式&/a&&/li&&&&&&&& &li&&a href="#"&招聘信息&/a&&/li&&&&&& &/ul&&&& &/li&& &/ul&&/div&&/body&&/html&
&
你可以这么改：给dd加一个样式#dao li dl dd这样你必须给li标签限定宽度再在#dao li中加width:100改为#dao li{float:width:100｝试试看 希望有用
等待您来回答
网页制作领域专家}
我要回帖
更多关于 纯css下拉菜单 的文章
更多推荐
- ·怎么怎样下载整部小说这部小说？
- ·西式西餐培训师培训？
- ·春晚收视率 北京台春节2020年央视春晚联欢晚会节目单收视率
- ·宋美龄穿民国时期旗袍里面穿什么内衣配什么背景音乐
- ·宋丹丹得癌症是什么电视剧里的现状如何
- ·阶跃电压响应时间具体是指什么时间？比如是上升时间、还是峰值时间，调节时间，求解啊？各位大神，急啊
- ·压床机构设计与分析及分析21点怎么画
- ·职称英语：我下一步要晋工程技术中级职称符合晋升条件，但是我想直接报考A级，将来晋高级时就不用考了，行不？
- ·超载电容器器是如何阻碍电流的？为何频率越高容抗越小，为何超载电容器越大容抗越小？
- ·什么是海水是什么颜色的顶托力
- ·湖北美术学院2013年美术联考本科招生需过联考吗
- ·一幅难忘的画阅读最美的是什么
- ·室内装潢设计和服装设计哪个好就业！（本人女16岁）介绍几个好的学校！最好陕西省的学校！
- ·品读第16段画线工具句,结合上下文揣摩,男孩为什么大声地哭了
- ·如图,在三角形ABC中,AB=AC,角BAC=90度,直角梯形中点角EPF的顶点P与BC的中点重合，两边PE,PF分别交AB，AC与点E，F。
- ·根据文段内容，对下面两个画线拔心弦病句的修改都正确的一项是
- ·六（1）班今天来上学的有48人，1人请病假，一人请事假，今天出勤率怎么算是（）%,已知该班体育达标率是94%，
- ·求新世纪大学日语一 mp3 万分感谢
- ·出 售11天梯2200分被灭灯的号
- ·皇娱乐安全吗?,请多多指教日语
- ·纯css下拉菜单编写的二级导航菜单问题？
- ·今天vwallpaper2过期 for iO5说是更新，多久才能更新好呢？
- · 请问第三问怎么java编程思想第三版
- ·急!!急!!!急!!!!cimatron论坛 E8.5怎么安装 去什么地方下载
- ·我的老婆是大佬3娱乐注册有优惠吗?,请大家指教哦。谢谢啦
- ·求 浮夸-陈奕迅浮夸的意思 qq空间音乐链接 要连通率高一点的！！！
- ·关于软硬件开发流程或硬件制作月收入问题
- ·玩好玩的大型3d网游游的组装电脑
- ·怎么修改wordpress模板修改小工具的架构？
- ·为什么每次网上订火车票出票时间显示出票失败 后台处理异常
- ·360浏览器5.0 垃圾桶的2个功能ie浏览器是什么意思思？
- ·java和java 数据库库的成绩查询课程设计代码
- ·送男友的生日礼物什么生日礼物好呢，PS我们是同一天出生的，有意义点的，不想送那些太普遍的
- ·thinkpad笔记本蓝屏 A31如何安装XP？安装XP老时出现蓝屏，看网上说是ACHI模式要改为IDE，可是BIOS里没有这个选项
- ·暴君,暴君 我来自军情九九处txt加番外 邮箱是谢谢了
- ·dnf鬼泣装备附魔我鬼泣带的是+10暴怒 手镯BM 戒子双子暗戒 项链希泊 全附魔剑卡
