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;
}

結果看起來像這樣：

我似乎無法弄清楚為什么我的兩個類別都不接受CSS display: inline 。 我在當前未顯示的每個類別下都有一個菜單。 當我刪除“菜單下”時， display:inline起作用。

無法使用JsFiddle： http ： //jsfiddle.net/LynwV/

感謝所有幫助！

Answer 1

@claustrofob是正確的，解決方案是inline-block 。 但是，@ Zenith也正確。 您需要修復標記。 我還將更改您編寫樣式的方式，而不是使用較長的元素選擇器鏈，而是將一個類放在要定位的元素上，並以此方式對其進行樣式設置。

Answer 2

您的標簽有誤。 <li><a href="#"<Categories 2</a> <li><a href="#">Categories 2</a>應該是<li><a href="#">Categories 2</a> 。 而且，正如@Zenith所說，您不能在nav后直接加上LI元素。

Answer 3

嘗試，

#menu li{
    display: inline-block;
}

正如@Zenith指出的那樣，您有無效的標記，而@Josefffs指出的是一些語法錯誤。

測試鏈接

Answer 4

我看到的問題是，您已經用另一個<li>標簽包裹了<ul>標簽定義的列表，該標簽似乎隱藏了項目列表。

也嘗試檢查元素。