CSS显示：内联无效

Question

HTML:

<!-- MENU -->
        <nav id="menu">
            <li><a href="#">Categories 1</a>
                <ul>
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
            <li><a href="#"<Categories 2</a>
                <ul>
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </nav>

CSS:

#menu {
  background-color: #0000FF;
  height: 20px;
  padding: 15px 0 10px;
  margin-bottom: 20px;
  font: 12px 'DroidSansBold', Tahoma,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 3px 2px 3px #000;
  border-radius: 5px;
  text-align: center;
} 

#menu li{
  display: inline;
}

#menu li a {
  color: #fff;
  text-decoration: none;
  margin: 0 120px;
}

#menu li ul li{
  display: none;
}

#menu li a:hover{
  color: #dc692e;
}

The result looks like this:

I can't seem to figure out why my two categories won't accept css display: inline . I have an menu under each of the categories that currently is not displayed. When I remove the 'under-menu', display:inline works.

Not working JsFiddle: http://jsfiddle.net/LynwV/

Thank for all help!

Answer 1

@claustrofob is right, inline-block is the solution. However, @Zenith is also correct. You need to fix your markup. I would also change how your writing your styles, instead of long element selector chains, put a class on the element you want to target and style it that way.

Answer 2

Your a tag is wrong. <li><a href="#"<Categories 2</a> should be <li><a href="#">Categories 2</a> . And, as @Zenith said, you can't have a nav followed directly by a LI element.

Answer 3

Try,

#menu li{
    display: inline-block;
}

You have invalid markup, as pointed out by @Zenith, and some broken syntax as pointed out by @Josefffs

Test Link

Answer 4

The issue I see is, you have wrapped the list defined by <ul> tags by an another <li> tag which seems to hide the list of items.

Try the inspect element for support as well.