シンプルな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を使用しなければなりませんでした。 ここで私も抱えている問題は.dropButtonの「幅」です

<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を使用してお勧めします。