div横向导航（css横向导航栏）
本文目录一览：
如何利用div+css制作横向导航
写啊
DIV这样写：
div class="1e17-1114-aad9-8e1f nav"
ul
li11/li
li22/li
li33/li
li44/li
li55/li
/ul
/div
CSS这样写：
.nav｛width:1024px; height:40px; line-height:40px; font-size:14px; ｝
.nav li{ float:left; width:200px; text-align:center; color:#ff0000}
DIV+CSS横向弹出式导航条！！！！！！！
纯DIV+CSS三级横向菜单（无JS）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titledropline-水平三级横向弹出菜单/title
style type="text/css"
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
/style
!--[if lte IE 6]
style type="text/css"
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
/style
![endif]--
/head
body
div class="1114-aad9-8e1f-519a menu"
ul
lia class="aad9-8e1f-519a-8b51 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 class="8e1f-519a-8b51-8626 hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK/a
!--[if lte IE 6]
a class="519a-8b51-8626-e8bd sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK
tabletrtd
![endif]--
ul class="8b51-8626-e8bd-efcd right_side"
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/hover_click.html" title="Hover/click with no active/focus borders"hover/click/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/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
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="8626-e8bd-efcd-84a1 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="e8bd-efcd-84a1-e7bc 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="efcd-84a1-e7bc-17ab 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="84a1-e7bc-17ab-2c6b 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
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="e7bc-17ab-2c6b-f665 hide" href="../ie/index.html"EXPLORER/a
!--[if lte IE 6]
a href="../ie/index.html"EXPLORER
tabletrtd
![endif]--
ul class="b775-04ee-b0a9-15a2 right_side"
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="04ee-b0a9-15a2-1e17 hide" href="../opacity/index.html"OPACITY/a
!--[if lte IE 6]
a href="../opacity/index.html"OPACITY
tabletrtd
![endif]--
ul class="b0a9-15a2-1e17-1114 right_side"
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
lia class="15a2-1e17-1114-aad9 hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK/a
!--[if lte IE 6]
a class="1e17-1114-aad9-8e1f sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK
tabletrtd
![endif]--
ul class="1114-aad9-8e1f-519a left_side"
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/hover_click.html" title="Hover/click with no active/focus borders"hover/click/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
/ul
/div
/body
/html
如何用DIV+CSS做漂亮的横排导航栏
先码好导航栏所需要的基本的HTML代码
这个就不必多说具体的代码如下：
html
head
title横向导航栏/title
style
!----
/style
/head
body
div class="aad9-8e1f-519a-8b51 nav"
ul
lia href="#"首页/a/li
lia href="#"导航1/a/li
lia href="#"导航2/a/li
lia href="#"导航3/a/li
lia href="#"导航4/a/li
lia href="#"导航5/a/li
lia href="#"导航6/a/li
/ul
/div
/body
/html
div布局网页时如何设置ul，li横向导航水平居中？
这个网上有很多教程的，基本上是先清除默认格式，然后给一定的宽度，再设置浮动属性：
ul li { list-style:none; width:200px; float:left;}
居中需要父容器设置：margin:auto
