CSS列表下拉菜單

我創建一個簡單的下拉菜單中使用CSS。CSS列表下拉菜單

<ul> 
    <li id="base"><a href="projects.php" class="button">Projects</a> 
     <ul> 
      <li>Project 1</li> 
      <li>Project 2</li> 
     </ul> 
    </li> 
</ul>

我想不通的是，我怎麼能得到錨文本「項目」，以改變它的背景正確地表明你在該列表進行瀏覽。

如果我申請一個背景效果李＃基地，

li#base:hover { 
    background: #4b4b4b; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -khtml-border-radius: 4px; 
}

我得到這個不需要的背景下，如果我將鼠標懸停在「項目1」或「項目2」：
undesired

的下面的圖片是如何，我想它的樣子，但這是應用到錨，而不是李＃基地（我是在鏈路上，而不是整個列表時，將僅保留高亮）懸停僞類：
desired

我試圖把這個在我能想到的最簡單的方法...

來源

2011-06-15 holyfsck

你設置的所有4個角的半徑。你需要在右上角和左上角有一個圓角。

-webkit-border-top-left-radius: 4px; 
-webkit-border-top-right-radius: 4px; 
-moz-border-radius-topleft: 4px; 
-moz-border-radius-topright: 4px; 
border-top-left-radius: 4px; 
border-top-right-radius: 4px;

來源

2011-06-15 04:12:39

謝謝！任何關於如何讓背景在應用於li＃base時向上延伸的線索？填充和保證金似乎沒有爲此做任何事情。 – holyfsck 2011-06-15 23:14:22

我不得不看HTML/CSS的其餘部分。由於嵌套和瀏覽器默認值，列表可能會很痛苦。使用CSS重置通常很有幫助。 – 2011-06-15 23:28:22

如果你有機會，你可以看看我的個人資料中的網站嗎？目前還沒有太多，所以沒有太多可挖掘的地方。 – holyfsck 2011-06-15 23:45:10

CSS列表下拉菜單

回答

相關問題