纯DIV+CSS制作的下拉菜单，二级下拉菜单，三级下拉菜单(无JS)_html/css_WEB-ITnose

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? /* 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; 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; } .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; 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; } .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; }

%20 %20 %20

%20%20%20

%20%20%20 %C2%A0%C2%A0%C2%A0%20 %20%C2%A0%C2%A0%C2%A0%20 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

%20 %20 %20

%20%20%20 %20

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

%20 %20 %20

%20%20%20 %20

%20%20%20 %C2%A0%C2%A0%C2%A0%20 %20%C2%A0%C2%A0%C2%A0%20 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

%20 %20 %20

%20%20%20 %20

%20%20%20 %C2%A0%C2%A0%C2%A0%20 %20%C2%A0%C2%A0%C2%A0%20 the first example for Internet Explorer weft fonts vertically aligning text

%20 %20 %20

%20%20%20 %20

%20%20%20 %C2%A0%C2%A0%C2%A0%20 %20%C2%A0%C2%A0%C2%A0%20 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

纯DIV+CSS制作的下拉菜单，二级下拉菜单，三级下拉菜单(无JS)_html/css_WEB-ITnose

Related articles