Question

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.

Answer 1

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.