Я работаю над меню JQuery, которое нужно расширять и сворачивать. Тем не менее, у меня возникли некоторые проблемы с выравниванием подменю так, как мне хотелось бы. По сути, я хочу, чтобы элементы подменю соответствовали элементам верхнего меню. Однако в настоящее время весь элемент подменю имеет отступ. Мой код выглядит следующим образом:
HTML
<ul id="theMenu">
<li><a title="open or close this 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 this section" href="#">Documents</a>
<ul>
<li><a href="#">Newsletters</a></li>
<li><a href="#">Policies and 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 a { background:#F6F6F6; color:#010101;
display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none;
border:1px solid #DFDFDF;
}
#theMenu ul a { background:#F6F6F6; color:#010101;
font-weight:normal; text-decoration:none;
}
#theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }
Как сделать подменю на одном уровне с левым краем главного меню?
Благодарю вас!
ДОБАВЛЕНО: Демо здесь