簡單的CSS菜單調整

Question

我有一個小問題與IE7（最新）...

我想創建一個簡單的「按鈕」，具有基本效果時，鼠標懸停顯示一個小菜單。 比如「行動」。也許你選擇了一個頁面上的多個項目，並且你想對它們應用動作。

所以這是我的代碼，並且除IE7外，一切看起來都很完美。它以100％的寬度顯示菜單，我不希望這樣....我希望它顯示寬度或按鈕文本。

如果你對調整這個有什麼想法，那將是非常感謝。

<style> 
* { 
    margin: 0; padding: 0;  
} 
body { font-family:Arial, Helvetica, sans-serif; } 

/* overall button layout */ 
.dropButton { 
    display: block; position: relative; background-color: #0073ea; color: #FFF; list-style: none; margin: 0; padding: 0; z-index: 100; } 

/* Head Button Visual */ 
.dropButton li a { 
    padding: 3px 10px; color: #FFF; text-decoration: none; display: inline-block; } 

/* Sub-Menu Display */ 
.dropButton ul {  
    position: absolute; left: -99999px; list-style: none; background: #FFF; border: solid 1px #D2D2D2; z-index: 105!important; } 

/* Menu listed items */ 
.dropButton ul a { 
    color: #0073ea; display: block; white-space: nowrap; } 

/* Bring the drop-menu to visual scope */ 
.dropButton li:hover ul { 
    left: 0; } 

/* Sub Menu items upon hover */ 
.dropButton li:hover ul li a:hover { 
    background: #F1F1F1; } 

</style> 


<ul class="dropButton"> 
    <li><a href="#">Actions</a> 
     <ul> 
      <li><a href="">Delete Selected</a></li> 
      <li><a href="">Add To Category</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 1

我能夠調整我自己的問題，所以我發佈了我的個人解決方案。 IE有一些怪癖，所以我們不得不使用FLOAT來幫助解決這個問題。 這是我的解決方案

<style> 
* { 
    margin: 0; padding: 0;  
} 
body { font-family:Arial, Helvetica, sans-serif; } 


/* DROP DOWN BUTTON DESIGN 
------------------------------------------- */ 

/* Need to add clearing for IE */ 
.clr { clear: both; } 

/* overall button layout */ 
.dropButton { 
    display: inline-block; float:left; position: relative; background-color: #0073ea; color: #FFF; list-style: none; margin: 0; padding: 0; z-index: 100; } 

/* Head Button Visual */ 
.dropButton li a { 
    padding: 3px 10px; color: #FFF; text-decoration: none; display: block; } 

/* Sub-Menu Display */ 
.dropButton ul {  
    position: absolute; left: -99999px; list-style: none; background: #FFF; border: solid 1px #D2D2D2; z-index: 105!important; } 

/* Menu listed items */ 
.dropButton ul a { 
    color: #0073ea; display: block; white-space: nowrap; } 

/* Bring the drop-menu to visual scope */ 
.dropButton li:hover ul { 
    left: 0; } 

/* Sub Menu items upon hover */ 
.dropButton li:hover ul li a:hover { 
    background: #F1F1F1; } 

/* Seperation within the menu */ 
.dropButton .sep { 
    border-top: solid 1px #D2D2D2; 
    width: 100%;  
} 

/* END OF BUTTON ----------------------------- */ 


</style> 


<ul class="dropButton"> 
    <li><a href="#">Actions</a> 
     <ul> 
      <li><a href="#">Delete Selected</a></li> 
      <li class="sep"><a href="#">Add To Category</a></li> 
     </ul> 
    </li> 
    <div class="clr"></div> 
</ul> 

<ul class="dropButton"> 
    <li><a href="#">Actions</a> 
     <ul> 
      <li><a href="#">Delete Selected</a></li> 
      <li><a href="#">Add To Category</a></li> 
     </ul> 
    </li> 
    <div class="clr"></div> 
</ul> 

Answer 2

選擇器：.dropButton li:hover ul在IE8中不起作用。

當你懸停/鼠標懸停dropButton時，爲自己省去頭痛，並使用簡單的javascript設置子菜單的左側位置。

是這樣的：

function load() { 
    var el = document.getElementById("dropButton"); 
    el.addEventListener("mouseover", showMenu, false); 
} 

function showMenu() { 
    this.childNodes(x).style.left = 0; 
} 

我也建議使用更多的類名和ID對你的元素。