﻿{\rtf1\ansi\ansicpg1252\deff0\uc1{\fonttbl{\f0\fcharset0 Times New Roman;}}{\colortbl
;}{\stylesheet{\s0\nowidctlpar\nooverflow\sl240\slmult1\f0\fs20\kerning28 Normal
;}}\paperw12240\paperh15840\margt1440\margl1800\margr1800\margb1440\headery720\footery864
\deftab720\pgnstart1\viewkind1\viewscale100\fet0{\*\docvar{ColorSet}{-1}}{\*\docvar
{ColorPos}{-1}}{\*\docvar{StyleSet}{-1}}{\*\docvar{StylePos}{-1}}\pard\plain\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28
{\header\pard\nowidctlpar\nooverflow\sl240\slmult1\tqc\tx4320\tqr\tx8640\fs20\par
}{\footer\pard\nowidctlpar\nooverflow\sl240\slmult1\tqc\tx4320\tqr\tx8640\fs20\par
}<head>\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta http
-equiv="Content-Type" content="text/html; charset=UTF-8" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <title> Stu
 Nicholls | CSSplay | A CSS only drop-down menu with overlap and overrrun</title
>\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta name
="Author" content="Stu Nicholls" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta name
="Keywords" content="cssplay, css play, Cascading, Style, Sheets, XHTML, w3c, opacity
, mozilla, opera, internet explorer, layout, validation, navigation, menus, CSS 
experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture
, dropdown, pull up, fly out, file, folder " />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta name
="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in
 CSS" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta name
="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta http
-equiv="imagetoolbar" content="no" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <link rel
="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title
="ICRA labels" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <meta http
-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" 
l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 
0 of 0 og 0 oh 0 c 0)  gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 
0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <link rel
="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay
.co.uk/feed.xml" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <link rel
="shortcut icon" href="../favicon.ico" type="image/x-icon" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <link rel
="icon" href="../favicon.ico" type="image/ico" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <link rel
="stylesheet" media="all" type="text/css" href="../css/css_play.css" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <link rel
="stylesheet" media="all" type="text/css" href="../css/menus.css" />\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <style type
="text/css">\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* ================================================================ 
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 This copyright
 notice must be untouched at all times.\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 The original
 version of this stylesheet and the associated (x)html\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 is available
 at http://www.cssplay.co.uk/menus/padding.html\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 Copyright
 (c) 2005-2007 Stu Nicholls. All rights reserved.\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 This stylesheet
 and the assocaited (x)html may be modified in any \par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 way to fit
 your requirements.\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 =================================================================== */
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the outer div to give it width */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu \{font
-size:0.85em; padding-bottom:200px; width:700px;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* remove
 all the bullets, borders and padding from the default list styling */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
\{padding:0;margin:0;list-style-type:none; height:3em; background:transparent;\}
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the sub-level lists */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul \{width:15em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* float 
the top list items to make it horizontal and a relative positon so that you can 
control the dropdown menu positon */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
li \{float:left;height:3em;line-height:3em; display:block;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the sub level list items */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul li \{display:block;width:12em;height:auto; line-height:1em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the links for the top level */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu a, .
menu a:visited \{display:block;float:left;height:100%; width:7em; font-size:1em;
text-decoration:none;color:#000;background:#949e7c url("../top_grad.gif") center center
; padding:0 3em 0 1em; border-left:1px solid #eee; border-right:1px solid #000;\}
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* hack IE5
.x to get the correct the faulty box model and get the width right */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 * html .menu
 a, * html .menu a:visited \{width:11em; w\\idth:7em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the sub level links */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul a, .menu ul ul a:visited \{display:block;background:#5b8686 url("../sub_grad.gif"); 
color:#fff;width:12em;height:100%;line-height:1em; padding:0.5em 1em; border-bottom
:1px solid #7aa;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 * html .menu
 ul ul a, * html .menu ul ul a:visited  \{width:14em; w\\idth:12em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the table so that it takes no part in the layout - required for IE to work */\par
}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu table
 \{border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size
:1em; z-index:1;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the third level background */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul ul a, .menu ul ul ul a:visited \{background:#b4be9c url("../sub_grad.gif");\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the fourth level background */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul ul ul a, .menu ul ul ul ul a:visited \{background:#c4ceac url("../sub_grad.gif");\}
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the sub level 1 background */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul :
hover a.sub1 \{background:#447b7b;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the sub level 2 background */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul :hover a.sub2 \{background:#447b7b;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* style 
the level hovers */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* first */
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 * html .menu
 a:hover \{color:#ff0;background:#d4d8bd url("../top_grad_2.gif") center center; position
:relative; z-index:100;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu li:
hover \{position:relative;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu :hover
 > a \{color:#ff0;background:#d4d8bd url("../top_grad_2.gif") center center;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* second
 */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 * html .menu
 ul ul a:hover\{color:#ff0;background:#7aa; position:relative; z-index:110;\}\par
}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul li:hover \{position:relative;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul :hover > a \{color:#ff0;background:#7aa;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* third */
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 * html .menu
 ul ul ul a:hover \{background:#7aa; position:relative; z-index:120;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul ul :hover > a \{background:#7aa;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* fourth
 */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul ul ul a:hover \{background:#7aa; position:relative; z-index:130;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* hide the
 sub levels and give them a positon absolute so that they take up no room */\par
}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul \{visibility:hidden;position:absolute;height:0;top:3em; left:0; width:14em;\}
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* position
 the third level flyout menu */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul ul\{left:12em;top:0;width:14em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* make the
 second level visible when hover on first level list OR link */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul :
hover ul\{visibility:visible; height:auto; padding:0 3em 3em 3em; background:transparent
 url("../images/trans.gif"); left:-3em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* keep the
 third level hidden when you hover on first level list OR link */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul :
hover ul ul\{visibility:hidden;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* keep the
 fourth level hidden when you hover on second level list OR link */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul :
hover ul :hover ul ul\{visibility:hidden;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* make the
 third level visible when you hover over second level list OR link */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul :
hover ul :hover ul\{visibility:visible; left:9em;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 /* make the
 fourth level visible when you hover over third level list OR link */\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul :
hover ul :hover ul :hover ul \{visibility:visible;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 </style>\par
}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <!--[if lte
 IE 6]>\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <style type
="text/css">\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 .menu ul 
ul \{left:-1px; margin-left:-1px;\}\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 </style>\par
}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 <![endif]-->
\par}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28 </head>\par
}

\pard\nowidctlpar\nooverflow\sl240\slmult1{\f0\lang1033\fs20\kerning28\par}

}

