Pure DIV CSS drop-down menu, second-level drop-down menu, third-level drop-down menu (no JS)_html/css_WEB-ITnose

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> dropdown? /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} .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:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;} DEMOS DEMOS zero dollars wrapping text styled form active focus HOVER/CLICK > HOVER/CLICK > styled form active focus hover/click shadow boxing image map fun backgrounds fade scrolling em sized images MENUS MENUS spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links LAYOUTS LAYOUTS Fixed 1 Fixed 2 Fixed 3 Fixed 4 minimum width BOXES BOXES spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links MOZILLA MOZILLA drop down menu cascading menu content: mozzie box rainbow box snooker cue target practise two tone headings shadow text EXPLORER EXPLORER example one weft fonts vertical align OPACITY OPACITY opaque colours opaque menu partial opacity partial opacity II styled form active focus hover/click

webjx.com .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; width: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; } .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; }

.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; margin-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; width:129px; } .menu ul li a:hover ul li a.drop { background:#c9c9a7; } .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; }

DEMOS

zero dollars advertising page wrapping text around images styled form active focus hover/click with no borders

styled form removing active/focus borders hover/click

shadow boxing image map for detailed information fun with background images fade scrolling em image sizes compared

BOXES

a coded list of spies vertical menu enlarging unordered list link images non-rectangular jigsaw links circular links

MOZILLA

drop down menu cascading menu content: mozzie box I can build a rainbow with transparent borders a snooker cue using border art target practise two tone headings shadow text

EXPLORER

the first example for Internet Explorer weft fonts vertically aligning text

OPACITY

a colour wheel using opaque colours a menu using opacity partial opacity partial opacity II

HOVER/CLICK

styled form removing active/focus borders hover/click

Pure DIV CSS drop-down menu, second-level drop-down menu, third-level drop-down menu (no JS)_html/css_WEB-ITnose

Related articles