Выпадающее меню работает по-другому в Mozilla Firefox

Question

Выпадающее меню работает по-другому в Mozilla Firefox

0

Я выбрал выпадающее меню. но работает в Mozilla firefox. Если вы посетите демо-страницу, вы поймете, в чем моя проблема. Когда я нажимаю на меню, работает по-разному. Но в других браузерах работают нормально. Это демо в JSFiddle CSS для меню:

a.change_photo_link{
    position:absolute;
    line-height:25px;
    width:20px;
    height:20px;
    cursor:pointer; 
    display:block;
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -moz-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -o-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -ms-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.bubmenu{
   float:left;
    position:relative;
    width:150px;
    height:auto;
    padding:0px;
    border:1px solid #d8dbdf;
    background-color:#f4f4f4;
    margin-top:0px;
    display:none;
    margin-left:-131px;
    margin-top:20px;

}
.change_photo ul {
   margin:0px;
    padding:0px;
    display:block;
    list-style:none;
}
.change_photo ul li a {
    width:150px;
    height:20px;
    line-height:20px;
    display:block;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size:11px;
    color:#3b5997;
    padding:3px 0px;
    cursor:pointer;
    text-decoration:none;
    text-indent:15px;
}
.change_photo ul li a:hover {
    background-color:#25476c;
    color:#fff;
    text-decoration:none;
}
.change_photo.open .change_photo_link { 
                cursor: pointer;
                width: 20px;
                height:20px;
                display: inline-block;  
                line-height: 16px;
                border-radius:0px;
                -webkit-border-radius:0px;
                -moz-border-radius:0px;
                -o-border-radius:0px;
                text-decoration: none !important;
                background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
            }
            .u_p_a.open .change_photo_link {
                -webkit-border-radius:0px;
                -moz-border-radius:0px;
                -o-border-radius:0px;
                 background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
    border-radius:0px;
            }

А также HTML-код:

<a class="change_photo_link"></a>
              <div class="bubmenu">
                 <ul class="root">
                   <li><a href="#">Fotoğrafı değiştir</a></li>
                   <li><a href="#">Fotoğrafı kaldır</a></li>
                 </ul>
              </div>

somebodyknowsme 21 март 2014, в 13:51

Источник

Теги:

javascript

jquery

html

css

firefox

1 ответ

Ещё вопросы

Renjith · Accepted Answer · 2014-03-21T09-51-00.000Z

Это из-за нижнего блока css. Прокомментируйте блок и проверите один раз.

    .change_photo.open .change_photo_link {
        background: url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat scroll 100% 0 #D8DBDF;
        border-radius: 0;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        line-height: 16px;
        text-decoration: none !important;
        width: 20px;
    }

Вы можете привести пример в моем jsfiddle?
привет, зайдите в firebug, css tab, затем прокомментируйте этот блок. вы получите разницу. Если вам нужно больше деталей. дайте мне знать.