Выпадающее меню CSS -> Кросс-браузер - PullRequest
Новая
       2

Выпадающее меню CSS -> Кросс-браузер

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

Может ли кто-нибудь из вас, замечательные разработчики, дать ссылку или предоставить мне ссылку на меню, которое является кросс-браузерным? У меня возникли проблемы с моим и его загрузкой в ​​Firefox, но в Chrome все нормально.

Мой div остается в правильном положении, но само меню опускается ниже div.

Мой HTML генерируется динамически, и текущая структура: 

<nav id="mainMenu"> 
        <ul> 
    <li class="first"> 
        <a href="#">Single Item</a> 
    </li> 
</ul> 
<ul> 
    <li class=""> 
        <a href="#">Drop Down Menu</a> 
        <ul> 
            <li class="first"> 
                <a href="#">Item 1</a> 
            </li> 
            <li class="last"> 
                <a href="#">Item 2</a> 
            </li> 
        </ul> 
    </li> 
</ul>

Мой текущий CSS: 

    #mainMenu{
     height:50px;
     margin:0 auto 15px auto;
     background-color:#6a6a6a;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     min-width: 800px;
 }

 #mainMenu ul{
     display:inline;
     -webkit-border-bottom-right-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-bottomright:2px;
     -moz-border-radius-bottomleft:2px;
 }

 #mainMenu ul li{
     margin-left:0px;
     width:120px;
     height:56px;
     float: left;
     list-style: none;
     position:relative;
 }


 #mainMenu li a {
     float:left;
     display:block;
     text-decoration:none;
     width:120px;
     height:35px;
     font-size:13px;
     line-height:45px;
     text-align:center;
     color:#fff;
     text-transform:uppercase;
     padding-top:-4px;
     margin:0px;
 }

 #mainMenu li a:hover, #mainMenu li a:active{
     text-decoration:none;
     background-color:#7a7a7a;
     color:#fff;
     width:120px;
     height:50px;
    -webkit-border-top-left-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-topleft:2px;
     -moz-border-radius-topleft:2px;
 }

 #mainMenu .signup 
 {
     float: right;
 }

 #mainMenu .signup a{
     background-color:#69c21c;
     height:50px;   
    -webkit-border-top-right-radius:2px;
     -webkit-border-bottom-right-radius:2px;
     -moz-border-radius-topright:2px;
     -moz-border-radius-bottomright:2px;
 }

 #mainMenu li .signup a:hover{
     background-color:#00afd8;
 }

 /*mainMenu Sub Menu */

 #mainMenu ul li ul{

     display: none;
     background-color:#7a7a7a;     
 }

 #mainMenu ul li:hover ul{
     text-transform:none;
     display:block;
     position:absolute;
     width:80px;
     top:50px;     
 }

 #mainMenu ul li:hover ul a{
     float:left;
     margin:0 0 0 -35px;
     line-height:35px;
     width:150px;
     height:35px;
     border:none;
     font-size:12px;
     text-align:left;
     text-transform:none;
 }

 #mainMenu  ul li ul li a:hover{    
     width:115px;
     height:30px;
     font-weight:bold;
     margin-left:-35px;
     line-height:35px;
 }

Обновление:

Я исправил мою проблему с позицией li, добавив clear: both и float left. Теперь у меня возникают проблемы при попытке сделать мои выпадающие li равными высоте и ширине li: 

#mainMenu{
    clear:both;
    float:left;
    margin:0 auto 15px auto;
    padding:0;
    z-index:1000;
    position:relative;
    height:50px;
    background-color:#6a6a6a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    min-width: 800px;
 }

 #mainMenu ul{
     display:inline;
     -webkit-border-bottom-right-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-bottomright:2px;
     -moz-border-radius-bottomleft:2px;
 }

 #mainMenu ul li{
     margin-left:0px;
     width:120px;
     height:56px;
     float: left;
     list-style: none;
     position:relative;
 }


 #mainMenu li a {
     float:left;
     display:block;
     text-decoration:none;
     width:120px;
     height:35px;
     font-size:13px;
     line-height:45px;
     text-align:center;
     color:#fff;
     text-transform:uppercase;
     padding-top:-4px;
     margin:0px;
 }

 #mainMenu li a:hover, #mainMenu li a:active{
     text-decoration:none;
     background-color:#7a7a7a;
     color:#fff;
     width:120px;
     height:50px;
    -webkit-border-top-left-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-topleft:2px;
     -moz-border-radius-topleft:2px;
 }

 #mainMenu .signup 
 {
    display:block;
    float:right;

}

 #mainMenu .signup a{
     background-color:#69c21c;
     height:50px;   
    -webkit-border-top-right-radius:2px;
     -webkit-border-bottom-right-radius:2px;
     -moz-border-radius-topright:2px;
     -moz-border-radius-bottomright:2px;
 }

 #mainMenu li .signup a:hover{
     background-color:#00afd8;
 }

 /*mainMenu Sub Menu */

 #mainMenu ul ul{
    display:none; /* Sub menus are hiden by default */
    position:absolute;
    top:2em;
    left:0;
    right:auto; /*resets the right:50% on the parent ul */
    width:10em; /* width of the drop-down menus */
    background-color:#7a7a7a;     
 }

 #mainMenu ul ul li{
    left:auto;
    margin:0;
    clear:left;
    width:50%;
}

 #mainMenu ul ul li a,
 #mainMenu ul li.active li a,
 #mainMenu ul li:hover ul li a,
 #mainMenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-weight:normal; /* resets the bold set for the top level menu items */
   line-height:1.4em; /* overwrite line-height value from top menu */
}   

 #mainMenu ul li:hover ul{
     text-transform:none;
     display:block;
     position:absolute;
     width:155px;
     top:50px;
 }

 #mainMenu ul li:hover ul a{
     float:left;
     margin:0 0 0 -35px;
     line-height:35px;
     width:150px;
     height:35px;
     border:none;
     font-size:12px;
     text-align:left;
     text-transform:none;
}

 #mainMenu  ul li ul li a:hover{    
     width:170px;
     height:30px;
     font-weight:bold;
     margin-left:-35px;
     line-height:35px;
 }

Ответы [ 3 ]

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

Очень хорошее меню http://matthewjamestaylor.com/blog/centered-dropdown-menus

Совсем минимальное количество стилей кода, так что его легко разобрать и изменить самостоятельно

0 голосов
/ 25 ноября 2018

Вы не закрыли тег nav ... что, вероятно, означает, что браузер может его игнорировать.

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

  1. Очень легко найти. Следующие ключевые слова возвращают хорошие совпадения: меню CSS без JavaScript 2011

  2. Я предпочитаю выпадающие меню, которые работают без Javascript . Взгляните на этот один. Очень маленький код, а также кросс-браузерная совместимость.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...