Menu 简单的CSS菜单调整

我有一个小问题与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>

* {
边距：0；填充：0；
}
正文{字体系列：Arial，Helvetica，无衬线；}
/*整体按钮布局*/
.下拉按钮{
显示：块；位置：相对；背景颜色：#0073ea；颜色：#FFF；列表样式：无；边距：0；填充：0；z索引：100；}
/*头部按钮视觉*/
李先生{
填充：3px 10px；颜色：#FFF；文本装饰：无；显示：内联块；}
/*子菜单显示*/
.dropButton ul{
位置：绝对；左：-9999px；列表样式：无；背景：#FFF；边框：实心1px#D2D2D2；z索引：105！重要；}
/*菜单项*/
.滴落按钮a{
颜色：#0073ea；显示：块；空白：nowrap；}
/*将下拉菜单置于可视范围*/
.dropButton li:悬停ul{
左：0；}
/*悬停时的子菜单项*/
.dropButton li:悬停ul li a:悬停{
背景：#f1f1；}

选择器：

.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。

我能够调整自己的问题，所以我发布了我的个人解决方案。 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>

* {
边距：0；填充：0；
}
正文{字体系列：Arial，Helvetica，无衬线；}
/*下拉按钮设计
------------------------------------------- */
/*需要为IE添加清算*/
.clr{clear:两者；}
/*整体按钮布局*/
.下拉按钮{
显示：内联块；浮动：左侧；位置：相对；背景颜色：#0073ea；颜色：#FFF；列表样式：无；边距：0；填充：0；z索引：100；}
/*头部按钮视觉*/
李先生{
填充：3px 10px；颜色：#FFF；文本装饰：无；显示：块；}
/*子菜单显示*/
.dropButton ul{
位置：绝对；左：-9999px；列表样式：无；背景：#FFF；边框：实心1px#D2D2D2；z索引：105！重要；}
/*菜单项*/
.滴落按钮a{
颜色：#0073ea；显示：块；空白：nowrap；}
/*将下拉菜单置于可视范围*/
.dropButton li:悬停ul{
左：0；}
/*悬停时的子菜单项*/
.dropButton li:悬停ul li a:悬停{
背景：#f1f1；}
/*菜单中的分隔*/
.dropButton.sep{
边框顶部：实心1px#D2D2D2；
宽度：100%；
}
/*按钮结束------------------*/

我遇到的问题是.drop按钮的“宽度”。。。其他一切似乎都在IE中正常工作。上面列出的代码在IE中不起作用。我坚持我所说的。祝你好运。