CODEWITHSUNDEEP
htmlcssinline
formatc2013
formatc2013

Reputation: 201

Why isn't my display:inline working?

I am trying to make a menu with submenus. I wrote my HTML and it looks like:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a>
            <ul>
                <li><a href="#">dropdown 1</a></li>
                <li><a href="#">dropdown 2</a></li>
                <li><a href="#">submenu </a>
                    <ul>
                        <li><a href="#">submenu 1</a></li>
                        <li><a href="#">submenu 2</a></li>
                        <li><a href="#">submenu 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</nav>

I have a stylesheet linked to it, and it looks like:

nav ul {
    display:inline-block;
    position:relative;
    list-style:none;
}
nav ul ul {
    display:none;
}
nav ul li:hover > ul {
    display:block;
}

For some reason the list is displayed as a block. I tried float:left, and it made no difference.

Upvotes: 1

Views: 102

Answers (2)

Alex Doe
Alex Doe

Reputation: 934

You have to to put display:inline-block for li elements:

nav li {
display:inline-block;
}

check here the example: http://jsfiddle.net/9y1uzqye/1/

Upvotes: 2

Shawn Erquhart
Shawn Erquhart

Reputation: 1848

You need to make the individual list items use block display, not the list itself.

Upvotes: 1

Related Questions