rustysilo Posted December 9, 2009 Share Posted December 9, 2009 Can anyone give me some pointers on editing the CSSplay drop-down menu? I want to resize it to have six first level menus, which will require shrinking pretty much everything. I made an attempt to start resizing the boxes and such, but it just doesn't look or function correctly. Having a difficult time here... Link to comment Share on other sites More sharing options...
thescientist Posted December 9, 2009 Share Posted December 9, 2009 what do you have so far? Link to comment Share on other sites More sharing options...
rustysilo Posted December 9, 2009 Author Share Posted December 9, 2009 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 More sharing options...
thescientist Posted December 9, 2009 Share Posted December 9, 2009 I meant in terms of code or a link so could see whats going on. Link to comment Share on other sites More sharing options...
fallen00sniper Posted December 12, 2009 Share Posted December 12, 2009 Yes please post your code. Link to comment Share on other sites More sharing options...
jalaladdin Posted December 14, 2009 Share Posted December 14, 2009 i have menu like:downloadcontact ushelpi would like have menu like:contact us help downloadplease guide me Link to comment Share on other sites More sharing options...
thescientist Posted December 14, 2009 Share Posted December 14, 2009 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. Link to comment Share on other sites More sharing options...
rustysilo Posted December 18, 2009 Author Share Posted December 18, 2009 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 More sharing options...
rustysilo Posted December 18, 2009 Author Share Posted December 18, 2009 Then again, the pulldowns aren't behaving. Link to comment Share on other sites More sharing options...
thescientist Posted December 18, 2009 Share Posted December 18, 2009 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 More sharing options...
rustysilo Posted December 18, 2009 Author Share Posted December 18, 2009 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 More sharing options...
thescientist Posted December 18, 2009 Share Posted December 18, 2009 can you link to the example you are using? You say it disappears when you move the mouse away, is that when going from one level to another? Link to comment Share on other sites More sharing options...
rustysilo Posted December 18, 2009 Author Share Posted December 18, 2009 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. Link to comment Share on other sites More sharing options...
rustysilo Posted December 18, 2009 Author Share Posted December 18, 2009 That was it. I had to change the position of the sublevels to bring them up a bit because I made the menu height shorter. Link to comment Share on other sites More sharing options...
thescientist Posted December 19, 2009 Share Posted December 19, 2009 glad it works. I just meant I wanted a link to the CSSPlay example you were using so I could see how it's supposed works. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.