html二级导航代码（HTML二级导航）
本文目录一览：
HTML 二级导航菜单
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU/title
style type="text/css"
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin: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: none;
}
/* 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:left;
position:relative;
}
/* 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:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
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 type="text/css"
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* 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="5747-bfc6-d955-225f menu"
ul
lia class="bfc6-d955-225f-013b hide" href="../menu/index.html"DEMOS/a
!--[if lte IE 6]
a href="../menu/index.html"DEMOS
tabletrtd
![endif]--
ul
lia href="../menu/zero_dollars.html" title="The zero dollar ads page"zero dollars/a/li
lia href="../menu/embed.html" title="Wrapping text around images"wrapping text/a/li
lia href="../menu/form.html" title="Styling forms"styled form/a/li
lia href="../menu/nodots.html" title="Removing active/focus borders"active focus/a/li
lia href="../menu/shadow_boxing.html" title="Multi-position drop shadow"shadow boxing/a/li
lia href="../menu/old_master.html" title="Image Map for detailed information"image map/a/li
lia href="../menu/bodies.html" title="fun with background images"fun backgrounds/a/li
lia href="../menu/fade_scroll.html" title="fade-out scrolling"fade scrolling/a/li
lia href="../menu/em_images.html" title="em size images compared"em sized images/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="d955-225f-013b-819b hide" href="index.html"MENUS/a
!--[if lte IE 6]
a href="index.html"MENUS
tabletrtd
![endif]--
ul
lia href="spies.html" title="a coded list of spies"spies menu/a/li
lia href="vertical.html" title="a horizontal vertical menu"vertical menu/a/li
lia href="expand.html" title="an enlarging unordered list"enlarging list/a/li
lia href="enlarge.html" title="an unordered list with link images"link images/a/li
lia href="cross.html" title="non-rectangular links"non-rectangular/a/li
lia href="jigsaw.html" title="jigsaw links"jigsaw links/a/li
lia href="circles.html" title="circular links"circular links/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="225f-013b-819b-3198 hide" href="../layouts/index.html"LAYOUTS/a
!--[if lte IE 6]
a href="../layouts/index.html"LAYOUTS
tabletrtd
![endif]--
ul
lia href="../layouts/bodyfix.html" title="Cross browser fixed layout"Fixed 1/a/li
lia href="../layouts/body2.html" title="Cross browser fixed layout"Fixed 2/a/li
lia href="../layouts/body4.html" title="Cross browser fixed layout"Fixed 3/a/li
lia href="../layouts/body5.html" title="Cross browser fixed layout"Fixed 4/a/li
lia href="../layouts/minimum.html" title="A simple minimum width layout"minimum width/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="013b-819b-3198-8767 hide" href="../boxes/index.html"BOXES/a
!--[if lte IE 6]
a href="../boxes/index.html"BOXES
tabletrtd
![endif]--
ul
lia href="spies.html" title="a coded list of spies"spies menu/a/li
lia href="vertical.html" title="a horizontal vertical menu"vertical menu/a/li
lia href="expand.html" title="an enlarging unordered list"enlarging list/a/li
lia href="enlarge.html" title="an unordered list with link images"link images/a/li
lia href="cross.html" title="non-rectangular links"non-rectangular/a/li
lia href="jigsaw.html" title="jigsaw links"jigsaw links/a/li
lia href="circles.html" title="circular links"circular links/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="819b-3198-8767-2366 hide" href="../mozilla/index.html"MOZILLA/a
!--[if lte IE 6]
a href="../mozilla/index.html"MOZILLA
tabletrtd
![endif]--
ul
lia href="../mozilla/dropdown.html" title="A drop down menu"drop down menu/a/li
lia href="../mozilla/cascade.html" title="A cascading menu"cascading menu/a/li
lia href="../mozilla/content.html" title="Using content:"content:/a/li
lia href="../mozilla/moxbox.html" title=":hover applied to a div"mozzie box/a/li
lia href="../mozilla/rainbow.html" title="I can build a rainbow"rainbow box/a/li
lia href="../mozilla/snooker.html" title="Snooker cue"snooker cue/a/li
lia href="../mozilla/target.html" title="Target Practise"target practise/a/li
lia href="../mozilla/splittext.html" title="Two tone headings"two tone headings/a/li
lia href="../mozilla/shadow_text.html" title="Shadow text"shadow text/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="3198-8767-2366-0f82 hide" href="../ie/index.html"EXPLORER/a
!--[if lte IE 6]
a href="../ie/index.html"EXPLORER
tabletrtd
![endif]--
ul
lia href="../ie/exampleone.html" title="Example one"example one/a/li
lia href="../ie/weft.html" title="Weft fonts"weft fonts/a/li
lia href="../ie/exampletwo.html" title="Vertical align"vertical align/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="8767-2366-0f82-878a hide" href="../opacity/index.html"OPACITY/a
!--[if lte IE 6]
a href="../opacity/index.html"OPACITY
tabletrtd
![endif]--
ul
lia href="../opacity/colours.html" title="colour wheel"opaque colours/a/li
lia href="../opacity/picturemenu.html" title="a menu using opacity"opaque menu/a/li
lia href="../opacity/png.html" title="partial opacity"partial opacity/a/li
lia href="../opacity/png2.html" title="partial opacity II"partial opacity II/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
/ul
!-- clear the floats if required --
div class="2366-0f82-878a-f0bf clear" /div
/div
/body
/html
HTML添加什么代码，可以将导航条的二级菜单向上展开？
二级菜单的绝对定位移到一级菜单上面就行了，CSS样式中肯定有position这个属性，把里面的值改下。
HTML二级导航代码，鼠标放上去后导航栏下面的内容下沉怎么解决
你给整体的导航栏的最外层div 加个样式 让他的层高一点z-index:9999;
这样就好了，不过你的这个弹出的这部分也得在这个div 里面啊
希望可以帮到你
html二级菜单怎么做
首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单
div class="0f82-878a-f0bf-7b76 nav"
ul
lia href="#"栏目一/a/li
lia href="#"栏目二/a/li
lia href="#"栏目三/a/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
如下图所示：
2
现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉ul li标签的list-style样式和a标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：
style type="text/css"
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
/style
打开页面预览效果
3
像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单
div class="878a-f0bf-7b76-b827 nav"
ul
lia href="#"栏目一/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目二/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目三/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
4
添加完二级栏目后，现在我们开始添加css样式，首先给li标签下的ul标签添加相对定位，再去除之下li标签的做浮动样式，再适当修改a标签，如一下样式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
我们刷新页面预览下效果
5
接下来我们隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
再次预览效果，如下图所示：
6
至此，横向二级下拉菜单就制作完成了，这里附加上全部代码，以方便各位朋友参考，感谢各位朋友的浏览。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title横排二级下拉菜单/title
style type="text/css"
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
/style
/head
body
div class="7380-3c10-3ef6-fdd4 nav"
ul
lia href="#"栏目一/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目二/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目三/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
/body
/html
