CSS：我的菜單中只有一部分應該隱藏

我試圖隱藏菜單的一部分。當我致電display:none整個菜單消失。我有id來分開它們，所以我不明白爲什麼會發生這種情況。下面的代碼：CSS：我的菜單中只有一部分應該隱藏

HTML：

 <ul id="menu"> 
      <li><a href="#">Categories 1</a> 
       <ul id="cat1"> 
        <li><a href="#">temp1</a></li> 
        <li><a href="#">temp2</a></li> 
        <li><a href="#">temp3</a></li> 
       </ul> 
      </li> 
     </ul>

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

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

#cat1 li{ 
display: block; 
padding: 10px; 
} 

#cat1 li a{ 
background-color: #0000FF; 
padding: 10px; 
border-radius: 5px; 
}

有些工作演示：http://jsfiddle.net/ZfN7t/

來源

2013-06-24 Nilzone-

「當我打電話顯示：無」。何時以及如何呼叫顯示：無？ – j08691

@ j08691我試圖在＃cat1 li和＃cat1 li a中調用它。當我做主菜單（「類別1」）也消失 –

@ Nilzone-在這裏工作很好 - http://jsfiddle.net/ZfN7t/1/ – lifetimes

當你處理內部UL UL，這是通常的風格更容易如果你給他們不同的分類：

<ul id="menu"> 
     <li class="menu-item"><a href="#">Categories 1</a> 
      <ul id="cat1"> 
       <li class="cat1-item"><a href="#">temp1</a></li> 
       <li class="cat1-item"><a href="#">temp2</a></li> 
       <li class="cat1-item"><a href="#">temp3</a></li> 
      </ul> 
     </li> 
</ul>

隱藏下的temp1，TEMP2，TEMP3這樣的：

.menu-item #cat1{ 
    display:none; 
}

要顯示懸停：

.menu-item:hover #cat1{ 
    display:block; 
}

來源

2013-06-24 21:48:15 Philip

CSS：我的菜單中只有一部分應該隱藏

回答

相關問題