Простая настройка меню CSS - PullRequest
Новая
       13

Простая настройка меню CSS

0 голосов
/ 20 июля 2011

У меня небольшая проблема с 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>

Ответы [ 2 ]

0 голосов
/ 21 июля 2011

Мне удалось настроить свою проблему, поэтому я отправил свое личное решение. С 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 голосов
/ 21 июля 2011

Селектор: .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;
}

Я бы также предложил использовать больше имен классов и идентификаторов для ваших элементов.

...