ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> dropdown? <br /> /* common styling */<br /> .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}<br /> .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;}<br /> .menu ul {padding:0; margin:0;list-style-type: none; }<br /> .menu ul li {float:left; margin-right:1px; position:relative;}<br /> .menu ul li ul {display: none;}<br /> /* specific to non IE browsers */<br /> .menu ul li:hover a {color:#fff; background:#36f;}<br /> .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}<br /> .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}<br /> .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}<br /> .menu ul li:hover ul li ul {display: none;}<br /> .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}<br /> .menu ul li:hover ul li a:hover {background:#6fc; color:#000;}<br /> .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}<br /> .menu ul li:hover ul li:hover ul.left {left:-105px;}<br /> DEMOS zero dollars wrapping text styled form active focus HOVER/CLICK > styled form active focus hover/click shadow boxing image map fun backgrounds fade scrolling em sized images MENUS spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links LAYOUTS Fixed 1 Fixed 2 Fixed 3 Fixed 4 minimum width BOXES spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links MOZILLA drop down menu cascading menu content: mozzie box rainbow box snooker cue target practise two tone headings shadow text EXPLORER example one weft fonts vertical align OPACITY opaque colours opaque menu partial opacity partial opacity II styled form active focus hover/click webjx.com <br /> .menu {<br /> font-family: verdana, sans-serif; <br /> width:750px; <br /> position:relative; <br /> font-size:0.85em;<br /> padding-bottom:250px;<br /> }<br /> .menu ul {<br /> padding:0; <br /> margin:0;<br /> list-style-type: none;<br /> }<br /> .menu ul li {<br /> float:left;<br /> position:relative;<br /> }<br /> .menu ul li a, .menu ul li a:visited {<br /> display:block; <br /> text-decoration:none; <br /> color:#000; <br /> width:139px; <br /> height:3em; <br /> color:#000; <br /> border:1px solid #fff; <br /> border-width:1px 1px 0 0; <br /> background:#dfc184; <br /> padding-left:10px; <br /> line-height:3em;<br /> }<br /> * html .menu ul li a, .menu ul li a:visited {<br /> width:149px;<br /> w\idth:139px;<br /> }<br /> .menu ul li ul {<br /> display: none;<br /> }<br /> table {<br /> margin:-1px; <br /> border-collapse:collapse;<br /> font-size:1em;<br /> } <p>/* specific to non IE browsers */<br /> .menu ul li:hover a {<br /> color:#fff; <br /> background:#bd8d5e;<br /> }<br /> .menu ul li:hover ul {<br /> display:block; <br /> position:absolute; <br /> top:3em;<br /> margin-top:1px;<br /> left:0; <br /> width:150px;<br /> }<br /> .menu ul li:hover ul li ul {<br /> display: none;<br /> }<br /> .menu ul li:hover ul li a {<br /> display:block; <br /> background:#faeec7; <br /> color:#000; <br /> height:auto; <br /> line-height:1.2em; <br /> padding:5px 10px; <br /> width:129px<br /> }<br /> .menu ul li:hover ul li a.drop {<br /> background:#c9c9a7;<br /> }<br /> .menu ul li:hover ul li a:hover {<br /> background:#c9c9a7; <br /> color:#000;<br /> }<br /> .menu ul li:hover ul li:hover ul {<br /> display:block; <br /> position:absolute; <br /> left:150px; <br /> top:0;<br /> width:150px;<br /> }<br /> .menu ul li:hover ul li:hover ul.left {<br /> left:-150px;<br /> } <p> 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 a coded list of spies vertical menu enlarging unordered list link images non-rectangular jigsaw links circular links 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 the first example for Internet Explorer weft fonts vertically aligning text 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
