Simple CSS Menu Adjustment

I am having a minor issue with IE7 (whats New)...

I am t开发者_StackOverflowrying to create a simple, "button" that has basic effects when mouse-over to show a small menu. Such as "actions". Perhaps you select multiple items on a page and you want to apply actions to them.

So this is my code, and everything seems to work perfectly fine, except in IE7. It displays the menu at 100% width, and I don't want that.... I want it to display the width or the button-text.

If you have any ideas on tweaking this, that would be much appreciated.

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

I was able to adjust my own problem, so I posted my personal solution. With IE there were a couple of quirks so we had to use FLOAT to help solve that problem. Here was my solution

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

The selector: .dropButton li:hover ul does not work in IE8.

Save yourself a headache and use a simple javascript to set the left position of the submenu when you hover/mouseover the dropButton.

something like this:

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

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

I would also suggest using more class names and id's for your elements.