div css 制作导航下拉,CSS+DIV设计实例：纯CSS制作下拉导航菜单

以下为引用的内容：

style type="text/css"

.menu {

font-family: verdana, sans-serif;

width:750px;

position:relative;

font-size:0.85em;

padding-bottom:250px;

}

.menu ul {

padding:0;

margin:0;

list-style-type: none;

}

.menu ul li {

float:left;

position:relative;

}

.menu ul li a, .menu ul li a:visited {

display:block;

text-decoration:none;

color:#000;

width:139px;

height:3em;

color:#000;

border:1px solid #fff;

border-width:1px 1px 0 0;

background:#dfc184;

padding-left:10px;

line-height:3em;

}

* html .menu ul li a, .menu ul li a:visited {

width:149px;

w\idth:139px;

}

.menu ul li ul {

display: none;

}

table {

margin:-1px;

border-collapse:collapse;

font-size:1em;

}

/* specific to non IE browsers */

.menu ul li:hover a {

color:#fff;

background:#bd8d5e;

}

.menu ul li:hover ul {

display:block;

position:absolute;

top:3em;

margin-top:1px;

left:0;

width:150px;

}

.menu ul li:hover ul li ul {

display: none;

}

.menu ul li:hover ul li a {

display:block;

background:#faeec7;

color:#000;

height:auto;

line-height:1.2em;

padding:5px 10px;

width:129px

}

.menu ul li:hover ul li a.drop {

background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;

}

.menu ul li:hover ul li a:hover {

background:#c9c9a7;

color:#000;

}

.menu ul li:hover ul li:hover ul {

display:block;

position:absolute;

left:150px;

top:0;

width:150px;

}

.menu ul li:hover ul li:hover ul.left {

left:-150px;

}

/style

!--[if lte IE 6]

style type="text/css"

.menu ul li a:hover {

color:#fff;

background:#bd8d5e;

}

.menu ul li a:hover ul {

display:block;

position:absolute;

top:3em;

left:0;

background:#fff;

margin-top:0;

marg\in-top:1px;

}

.menu ul li a:hover ul li a {

display:block;

background:#dbe4ab;

color:#000;

height:auto;

line-height:1.5em;

padding:5px 10px;

width:150px;

w\idth:129px;

}

.menu ul li a:hover ul li a.drop {

background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;

}

.menu ul li a:hover ul li a ul {

visibility:hidden;

position:absolute;

height:0;

width:0;

}

.menu ul li a:hover ul li a:hover {

background:#c9c9a7; color:#000;

}

.menu ul li a:hover ul li a:hover ul {

visibility:visible;

position:absolute;

top:0;

color:#000;

left:150px;

}

.menu ul li a:hover ul li a:hover ul.left {

left:-150px;

}

/style

![endif]--

div class="menu"

ul

lia class="drop" href="../menu/index.html"DEMOS

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

ul

lia href="../menu/zero_dollars.html" title="The zero dollar ads page"zero dollars advertising page/a/li

lia href="../menu/embed.html" title="Wrapping text around images"wrapping text around images/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="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"hover/click with no borders

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

ul

lia href="../menu/form.html" title="Styling forms"styled form/a/li

lia href="../menu/nodots.html" title="Removing active/focus borders"removing active/focus borders/a/li

lia href="../menu/hover_click.html" title="Hover/click with no active/focus borders"hover/click/a/li

/ul

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

li class="upone"a 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 for detailed information/a/li

lia href="../menu/bodies.html" title="fun with background images"fun with background images/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 image sizes compared/a/li

/ul

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

lia href="../boxes/index.html"BOXES

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

ul

lia href="spies.html" title="a coded list of spies"a coded list of spies/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 unordered 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

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

lia href="../mozilla/index.html"MOZILLA

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

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"I can build a rainbow with transparent borders/a/li

lia href="../mozilla/snooker.html" title="Snooker cue"a snooker cue using border art/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

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

lia href="../ie/index.html"EXPLORER

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

ul

lia href="../ie/exampleone.html" title="Example one"the first example for Internet Explorer/a/li

lia href="../ie/weft.html" title="Weft fonts"weft fonts/a/li

lia href="../ie/exampletwo.html" title="Vertical align"vertically aligning text/a/li

/ul

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

lia href="../opacity/index.html"OPACITY

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

ul

lia href="../opacity/colours.html" title="colour wheel"a colour wheel using opaque colours/a/li

lia href="../opacity/picturemenu.html" title="a menu using opacity"a menu using opacity/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="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK

!--[if IE 7]!--

/a

!--![endif]--

tabletrtd

ul class="left"

lia href="../menu/form.html" title="Styling forms"styled form/a/li

lia href="../menu/nodots.html" title="Removing active/focus borders"removing active/focus borders/a/li

lia href="../menu/hover_click.html" title="Hover/click with no active/focus borders"hover/click/a/li

/ul

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

/ul

/td/tr/table

!--[if lte IE 6]

/a

![endif]--

/li

/ul

/div