css - Collapsing a Menu with JQuery -
i working on jquery menu needs expand , collapse. however, i'm having issues getting sub-menus line like. basically, want sub menu items in-line top-menu items. however, stands now, entire sub-menu item indented. code looks following:
html
<ul id="themenu"> <li><a title="open or close section" href="#">info</a> <ul> <li><a href="#">basic</a></li> <li><a href="#">advanced</a></li> </ul> </li> <li><a title="open or close section" href="#">documents</a> <ul> <li><a href="#">newsletters</a></li> <li><a href="#">policies , procedures</a></li> <li><a href="#">job descriptions</a></li> </ul> </li> </ul>
javascript
$(document).ready(function () { $("#themenu > li > a").not(":first").find("+ ul").slideup(1); $("#themenu > li > a").click(function () { $(this).find("+ ul").slidetoggle("fast"); }); });
css
#themenu, #themenu ul { list-style:none; width:15em; } #themenu { background:#f6f6f6; color:#010101; display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none; border:1px solid #dfdfdf; } #themenu ul { background:#f6f6f6; color:#010101; font-weight:normal; text-decoration:none; } #themenu ul a:hover { background:#f0ebe1; text-decoration:underline; color:#711515; }
how make sub menus flush left edge of root menu?
thank you!
added: demo here
#themenu, #themenu ul { list-style:none; width:15em; }
on
#themenu, #themenu ul { list-style:none; width:15em;margin:0;padding:0; }
Comments
Post a Comment