CODEWITHSUNDEEP
jquerymenuhtml-listshtml
Nojan
Nojan

Reputation: 913

jQuery vertical menu issue

so i have a simple unordered list:

<ul id="nav">
<li>
    <span>Group 1 »</span>
    <ul>
        <!-- list items -->
    </ul>
</li>
<li>
    <span>Group 2 »</span>
    <ul>
        <!-- list items -->
    </ul>
</li>
</ul>

I have styled this menu and added some jQuery to show 2nd level ul's whenever user clicks on the span area and span's are styled to be block-level, so you can click everywhere inside the list items and have the expected functionality.

The problem is, after user clicks on span element and the unordered list appears, the span acts like an inline element, and to disappear the ul user has to click on the text and clicking on parent-li area won't work.

you can see the live demo here: http://jsfiddle.net/d2Z7m/6/

maybe there's better solutions to create a vertical menu, but i just want to figure out why span element is acting like this and what causes this.

Upvotes: 0

Views: 249

Answers (2)

&#193;xel Costas Pena
&#193;xel Costas Pena

Reputation: 6235

Add to your spans position:relative

Upvotes: 0

Tim B James
Tim B James

Reputation: 20364

Change your styling for #nav li ul to

#nav li ul {
    width:100px;
    margin: -35px 0px 0px 155px;
}

As currently the padding is affecting the span tag.

Upvotes: 1

Related Questions