I am using a CSS drop-down menu that I found on a website and I would like to add a sublevel to the menu and I am not sure on how to code it. i jave tried several different ways and it just hasn't come out correctly. If someone would be willing to help me get this cleared up I would greatly appreciate it. Thank you in advance for your help and comments. <div class="menu"> <ul> <li><a class="drop" href="../menu/index.html">Demos <!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tr><td> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="../boxes/index.html">Boxes <!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tr><td> <ul> <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="../mozilla/index.html">Mozilla <!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tr><td> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="../ie/index.html">Explorer <!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tr><td> <ul> <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="../opacity/index.html">Opacity <!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tr><td> <ul> <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> </ul> </div> HTML: The CSS code /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_variations.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */ /* Set up the default font and ovrall size to include image */ .menu { font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; width:500px; background:#fff url(../meeting.jpg) 0 20px no-repeat; position:relative; margin:2em 125px 0 125px; font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; } /* get rid of the default padding - margin and bullets */ .menu ul { padding:0; margin:0; list-style-type: none; } /* make menu horizontal */ .menu ul li { float:left; position:relative; } /* set up the default top level links */ .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#000; width:88px; height:1.5em; font-weight:bold; color:#888; border-bottom:8px solid #888; background:#fff; padding-left:10px; line-height:1.5em; margin-right:2px; } /* hack for IE5.5 to correct the faulty box model */ * html .menu ul li a, .menu ul li a:visited { width:98px; w\idth:88px; } /* hide the drop down menu */ .menu ul li ul { display: none; } /* remove all table style so that it does not interfere with the menu */ .menu table { margin:-1px; border-collapse:collapse; font-size:1em; } /* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */ /* style the top level hover */ .menu ul li:hover a, .menu ul li a:hover { color:#000; border-bottom:8px solid #606; } /* make the drop down menu show and correctly position it */ .menu ul li:hover ul, .menu ul li a:hover ul { display:block; position:absolute; top:1.2em; margin-top:11px; left:0; width:96px; border:1px solid #888; border-top:0; background:transparent; } /* style the drop down links with no hover */ .menu ul li:hover ul li a, .menu ul li a:hover ul li a { display:block; background:transparent url(../../opacity/opaque.png); color:#000; border:0; margin:0; color:#333; font-weight:normal; font-size:0.9em; height:auto; line-height:1em; padding:5px; width:86px } /* style the drop down menu links when hovered */ .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover { background:#888; color:#fff; } /* special styling for IE5.5 and IE6 - transparency is non validating */ .menu ul li a:hover ul { background:transparent filter: alpha(opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); opacity:0.8; margin-top:10px; /* for IE5.5 faulty box model */ marg\in-top:11px; /* for IE6 */ } /* IE5.5 hack for faulty box model in drop down menu */ .menu ul li a:hover ul li a { background:#ddd; width:96px; /* for IE5.5 faulty box model */ w\idth:86px; /* for IE6 */ } Code (markup):
In a situation like this I'd recommend using a different script altogether. The one above is simply too messy. http://purecssmenu.com/ More: http://www.google.ca/search?q=css+drop+down+menu
I have a tutorial and a menu, can be found on my freebies section of my website. You can have a look if that useful to you.