Jump to content

Cssplay Drop-down Menu


rustysilo
 Share

Recommended Posts

what do you have so far?
I shrank the height and width, but each link then had space between them and the additional first level link ended up on the line below (I guess due to the overall menu width)... And the pulldowns go away when I try to hover the second level links in them... most of the time anyway.
Link to comment
Share on other sites

maybe you haven't floated your <li>'s</b] to the left? again, we've been asking for your code, so until we see it, we can't be much more help.
Actually, I think I may have worked it out. Please review the code and let me know if you see errors. It displays correctly in IE and Firefox on my end. I have just saved the cssplay page and removed most of the info, but some still remains... I have modified other bits and pieces just playing around to see if I could modify it, but much of it from the original is intact.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title> Stu Nicholls | CSSplay | A css only dropdown menu</title><meta name="Author" content="Stu Nicholls" /><meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, horizontal, dropdown, drop, multi, level, cross, browser, valid" /><meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" /><meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" /><meta http-equiv="imagetoolbar" content="no" /><link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" /><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))' /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" /><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="icon" href="../favicon.ico" type="image/ico" /><style type="text/css">@import url(http://www.google.com/cse/api/branding.css);</style><link rel="stylesheet" media="all" type="text/css" href="../css/default.css" /><style type="text/css">#info {background:#f8f8f8; border:0;}/* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)htmlis available at http://www.cssplay.co.uk/menus/final_drop.htmlCopyright (c) 2005-2008 Stu Nicholls. All rights reserved.This stylesheet and the associated (x)html may be modified in any way to fit your requirements.=================================================================== */.menu {width:746px; height:22px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}/* hack to correct IE5.5 faulty box model */* html .menu {width:747px; w\idth:746px;}/* remove all the bullets, borders and padding from the default list styling */.menu ul {padding:0;margin:0;list-style-type:none;}.menu ul ul {width:120px;}/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */.menu li {float:left;width:123px;position:relative;}/* style the links for the top level */.menu a, .menu a:visited {display:block;font-size:10px;text-decoration:none; color:#fff; width:120px; height:20px; border:1px solid #000; border-width:1px 0 1px 1px; background:#69E; padding-left:10px; line-height:20px; font-weight:bold;}/* a hack so that IE5.5 faulty box model is corrected */* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}/* style the second level background */.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}/* style the second level hover */.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}/* style the third level background */.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}/* style the third level hover */.menu ul ul ul a:hover {background:#b2ab9b;}/* hide the sub levels and give them a positon absolute so that they take up no room */.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}/* another hack for IE5.5 */* html .menu ul ul {top:30px;t\op:31px;}/* position the third level flyout menu */.menu ul ul ul{left:149px; top:-1px; width:149px;}/* position the third level flyout menu for a left flyout */.menu ul ul ul.left {left:-149px;}/* style the table so that it takes no ppart in the layout - required for IE to work */.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}/* style the second level links */.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}/* yet another hack for IE5.5 */* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}/* style the top level hover */.menu a:hover, .menu ul ul a:hover{color:#000; background:#b7d186;}.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#b7d186;}/* make the second level visible when hover on first level list OR link */.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible; }/* keep the third level hidden when you hover on first level list OR link */.menu ul :hover ul ul{visibility:hidden;}/* make the third level visible when you hover over second level list OR link */.menu ul :hover ul :hover ul{ visibility:visible;}</style></head><body><h2>The ULTIMATE CSS only drop-down menu</h2><h3>First published 7th April 2006</h3><div class="menu"><ul><li><a href="../menu/index.html">ABOUT<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul>	<li><a href="../menu/zero_dollars.html">zero dollars advertising page</a></li>	<li><a href="../menu/embed.html">wrapping text around images</a></li>	<li><a href="../menu/form.html">styled form</a></li>	<li><a href="../menu/nodots.html">active focus</a></li>	<li><a class="drop" href="../menu/hover_click.html">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul>			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a class="drop" href="../menu/shadow_boxing.html">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul>			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a class="drop" href="../menu/old_master.html">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul>			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="../menu/bodies.html">fun with background images</a></li>	<li><a href="../menu/fade_scroll.html">fade scrolling</a></li>	<li><a href="../menu/em_images.html">em image sizes compared</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../boxes/index.html">PROGRAMS<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul>	<li><a href="spies.html">a coded list of spies</a></li>	<li><a href="vertical.html">vertical menu</a></li>	<li><a href="expand.html">enlarging unordered list</a></li>	<li><a href="enlarge.html">link images</a></li>	<li><a href="cross.html">non-rectangular</a></li>	<li><a href="jigsaw.html">jigsaw links</a></li>	<li><a href="circles.html">circular links</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../ie/index.html">ADMISSIONS & AID</a></li><li><a href="../ie/index.html">FACULTIES</a></li><li><a href="../ie/index.html">ADMINISTRATION</a></li><li><a href="../opacity/index.html">FAQ's<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul>	<li><a href="../opacity/colours.html">a colour wheel using opaque colours</a></li>	<li><a href="../opacity/picturemenu.html">a menu using opacity</a></li>	<li><a href="../opacity/png.html">partial opacity</a></li>	<li><a href="../opacity/png2.html">partial opacity II</a></li>	<li><a class="drop" href="../menu/hover_click.html">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="left">			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div></body></html>

Link to comment
Share on other sites

to use their code, you should only have to copy out the relevant bits of data. I wouldn't try saving their page and modifying it. They should have a CSS section in the page's source for you to copy over and then the menu should be in the body of the same page's HTML. Try copying just those two bits of info into a blank page, so you know nothing else will mess with it as far as code, stuff that doesn't validate, other CSS, and see if you can get it working just by itself in a page with a strict DTD that validates.

Link to comment
Share on other sites

The code validates fine, but the dropdowns disappear as soon as you hover off the 1st level button. I stripped near everything else out of it now.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title> CCGC</title><style type="text/css">#info {background:#f8f8f8; border:0;}/* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)htmlis available at http://www.cssplay.co.uk/menus/final_drop.htmlCopyright (c) 2005-2008 Stu Nicholls. All rights reserved.This stylesheet and the associated (x)html may be modified in any way to fit your requirements.=================================================================== */.menu {width:746px; height:22px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}/* hack to correct IE5.5 faulty box model */* html .menu {width:747px; w\idth:746px;}/* remove all the bullets, borders and padding from the default list styling */.menu ul {padding:0;margin:0;list-style-type:none;}.menu ul ul {width:120px;}/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */.menu li {float:left;width:123px;position:relative;}/* style the links for the top level */.menu a, .menu a:visited {display:block;font-size:10px;text-decoration:none; color:#fff; width:120px; height:20px; border:1px solid #000; border-width:1px 0 1px 1px; background:#69E; padding-left:10px; line-height:20px; font-weight:bold;}/* a hack so that IE5.5 faulty box model is corrected */* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}/* style the second level background */.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}/* style the second level hover */.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}/* style the third level background */.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}/* style the third level hover */.menu ul ul ul a:hover {background:#b2ab9b;}/* hide the sub levels and give them a positon absolute so that they take up no room */.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}/* another hack for IE5.5 */* html .menu ul ul {top:30px;t\op:31px;}/* position the third level flyout menu */.menu ul ul ul{left:149px; top:-1px; width:149px;}/* position the third level flyout menu for a left flyout */.menu ul ul ul.left {left:-149px;}/* style the table so that it takes no ppart in the layout - required for IE to work */.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}/* style the second level links */.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}/* yet another hack for IE5.5 */* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}/* style the top level hover */.menu a:hover, .menu ul ul a:hover{color:#000; background:#b7d186;}.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#b7d186;}/* make the second level visible when hover on first level list OR link */.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible; }/* keep the third level hidden when you hover on first level list OR link */.menu ul :hover ul ul{visibility:hidden;}/* make the third level visible when you hover over second level list OR link */.menu ul :hover ul :hover ul{ visibility:visible;}</style></head><body><h2>The ULTIMATE CSS only drop-down menu</h2><h3>First published 7th April 2006</h3><div class="menu"><ul><li><a href="../menu/index.html">ABOUT<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul>	<li><a href="../menu/zero_dollars.html">zero dollars advertising page</a></li>	<li><a href="../menu/embed.html">wrapping text around images</a></li>	<li><a href="../menu/form.html">styled form</a></li>	<li><a href="../menu/nodots.html">active focus</a></li>	<li><a class="drop" href="../menu/hover_click.html">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul>			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a class="drop" href="../menu/shadow_boxing.html">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul>			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a class="drop" href="../menu/old_master.html">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul>			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="../menu/bodies.html">fun with background images</a></li>	<li><a href="../menu/fade_scroll.html">fade scrolling</a></li>	<li><a href="../menu/em_images.html">em image sizes compared</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../boxes/index.html">PROGRAMS<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul>	<li><a href="spies.html">a coded list of spies</a></li>	<li><a href="vertical.html">vertical menu</a></li>	<li><a href="expand.html">enlarging unordered list</a></li>	<li><a href="enlarge.html">link images</a></li>	<li><a href="cross.html">non-rectangular</a></li>	<li><a href="jigsaw.html">jigsaw links</a></li>	<li><a href="circles.html">circular links</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../ie/index.html">ADMISSIONS & AID</a></li><li><a href="../ie/index.html">FACULTIES</a></li><li><a href="../ie/index.html">ADMINISTRATION</a></li><li><a href="../opacity/index.html">FAQ's<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul>	<li><a href="../opacity/colours.html">a colour wheel using opaque colours</a></li>	<li><a href="../opacity/picturemenu.html">a menu using opacity</a></li>	<li><a href="../opacity/png.html">partial opacity</a></li>	<li><a href="../opacity/png2.html">partial opacity II</a></li>	<li><a class="drop" href="../menu/hover_click.html">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="left">			<li><a href="../menu/form.html">styled form</a></li>			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>			<li><a href="../menu/hover_click.html">hover/click</a></li>		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div></body></html>

Link to comment
Share on other sites

I'm just working locally so I can't give a link, but yes, when I hover over the first level it pops the second level drop-down, but if I move the cursor towards the second level the menu disappears as soon as I move away from the first level... get it?I think it has something to do with the spacing in between the first level and second level drop-down. I'm not sure how to fix that though.

Edited by rustysilo
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...