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中不起作用。

使用简单的 javascript 设置左边的位置，当你将dropButton悬停/鼠标悬停时，可以省去头疼。

类似的东西：

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

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

我还建议为你的元素使用更多的类名和id。

简单的CSS菜单调整

2 个答案: