javascript - Dropdown menu working different in mozilla firefox -


i did dropdown menu. works different in mozilla firefox. if visit demo page can understand problem. when click on menu works differently. in other browsers working normally. demo in jsfiddle css menu :

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 {     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;             } 

and html code:

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

this because of below css block. comment block , test once.

    .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;     } 

Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -