<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0030)http://www.oukx.com/js/008.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><HEAD><TITLE>Stu Nicholls | CSSplay | A css only dropdown menu</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<META content="Stu Nicholls" name=Author>
<STYLE type=text/css>BODY {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 76%; BACKGROUND: #fff; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px
}
#info {
POSITION: relative
}
P.bold {
PADDING-LEFT: 15px; COLOR: #c00
}
A.linkup {
POSITION: relative
}
A.buttonup {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 650px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 170px; BORDER-RIGHT-WIDTH: 0px
}
A.buttonup IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.gleft {
FLOAT: left; MARGIN: 25px 0px 10px
}
.gright {
FLOAT: right; MARGIN: 25px 5px 10px 0px
}
.grc {
MARGIN: 20px 0px 0px 10px
}
.menu {
FONT-SIZE: 0.85em; Z-INDEX: 100; WIDTH: 750px; POSITION: relative
}
.menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menu UL UL {
WIDTH: 150px
}
.menu LI {
FLOAT: left; WIDTH: 150px; POSITION: relative
}
.menu A {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #758279; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 29px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 30px; TEXT-DECORATION: none
}
.menu A:visited {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #758279; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 29px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 30px; TEXT-DECORATION: none
}
HTML .menu A {
WIDTH: 139px
}
HTML .menu A:visited {
WIDTH: 139px
}
.menu UL UL A.drop {
BACKGROUND: url(../../graphics/drop.gif) #d4d8bd no-repeat right bottom
}
.menu UL UL A.drop:visited {
BACKGROUND: url(../../graphics/drop.gif) #d4d8bd no-repeat right bottom
}
.menu UL UL A.drop:hover {
BACKGROUND: url(../../graphics/drop.gif) #c9ba65 no-repeat right bottom
}
UNKNOWN {
BACKGROUND: url(../../graphics/drop.gif) #c9ba65 no-repeat right bottom
}
.menu UL UL UL A {
BACKGROUND: #e2dfa8
}
.menu UL UL UL A:visited {
BACKGROUND: #e2dfa8
}
.menu UL UL UL A:hover {
BACKGROUND: #b2ab9b
}
.menu UL UL {
LEFT: 0px; VISIBILITY: hidden; WIDTH: 150px; POSITION: absolute; TOP: 31px; HEIGHT: 0px
}
HTML .menu UL UL {
TOP: 31px
}
.menu UL UL UL {
LEFT: 150px; WIDTH: 150px; TOP: 0px
}
.menu UL UL UL.left {
LEFT: -150px
}
.menu TABLE {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
.menu UL UL A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #d4d8bd; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto
}
.menu UL UL A:visited {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #d4d8bd; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto
}
HTML .menu UL UL A {
WIDTH: 129px
}
.menu A:hover {
BACKGROUND: #949e7c; COLOR: #fff
}
.menu UL UL A:hover {
BACKGROUND: #949e7c; COLOR: #fff
}
UNKNOWN {
BACKGROUND: #949e7c; COLOR: #fff
}
UNKNOWN {
BACKGROUND: #949e7c; COLOR: #fff
}
.menu UL LI:hover UL {
VISIBILITY: visible
}
.menu UL A:hover UL {
VISIBILITY: visible
}
.menu UL :hover UL UL {
VISIBILITY: hidden
}
.menu UL :hover UL :hover UL {
VISIBILITY: visible
}
</STYLE>
<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY id=www-cssplay-co-uk>
<DIV class=menu>
<UL>
<LI><A href="http://www.cssplay.co.uk/menu/index.html">DEMOS<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]>
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<UL>
<LI><A title="The zero dollar ads page"
href="http://www.cssplay.co.uk/menu/zero_dollars.html">zero dollars
advertising page</A> </LI>
<LI><A title="Wrapping text around images"
href="http://www.cssplay.co.uk/menu/embed.html">wrapping text around
images</A> </LI>
<LI><A title="Styling forms"
href="http://www.cssplay.co.uk/menu/form.html">styled form</A> </LI>
<LI><A title="Removing active/focus borders"
href="http://www.cssplay.co.uk/menu/nodots.html">active focus</A>
</LI>
<LI><A class=drop title="Hover/click with no active/focus borders"
href="http://www.cssplay.co.uk/menu/hover_click.html">hover/click with
no borders<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]>
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<UL>
<LI><A title="Styling forms"
href="http://www.cssplay.co.uk/menu/form.html">styled form</A>
</LI>
<LI><A title="Removing active/focus borders"
href="http://www.cssplay.co.uk/menu/nodots.html">removing
active/focus borders</A> </LI>
<LI><A title="Hover/click with no active/focus borders"
href="http://www.cssplay.co.uk/menu/hover_click.html">hover/click</A>
</LI></UL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><A class=drop title="Multi-position drop shadow"
href="http://www.cssplay.co.uk/menu/shadow_boxing.html">shadow boxing<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]>
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<UL>
<LI><A title="Styling forms"
href="http://www.cssplay.co.uk/menu/form.html">styled form</A>
</LI>
<LI><A title="Removing active/focus borders"
href="http://www.cssplay.co.uk/menu/nodots.html">removing
active/focus borders</A> </LI>
<LI><A title="Hover/click with no active/focus borders"
href="http://www.cssplay.co.uk/menu/hover_click.html">hover/click</A>
</LI></UL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><A class=drop title="Image Map for detailed information"
href="http://www.cssplay.co.uk/menu/old_master.html">image map for
detailed information<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]>
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<UL>
<LI><A title="Styling forms"
href="http://www.cssplay.co.uk/menu/form.html">styled form</A>
</LI>
<LI><A title="Removing active/focus borders"
href="http://www.cssplay.co.uk/menu/nodots.html">removing
active/focus borders</A> </LI>
<LI><A title="Hover/click with no active/focus borders"
href="http://www.cssplay.co.uk/menu/hover_click.html">hover/click</A>
</LI></UL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><A title="fun with background images"
href="http://www.cssplay.co.uk/menu/bodies.html">fun with background
images</A> </LI>
<LI><A title="fade-out scrolling"
href="http://www.cssplay.co.uk/menu/fade_scroll
