2013-08-04 4 views
0

У меня проблема, когда мое меню CSS переходит в другое положение, когда оно возвращается назад. Любая идея, как я могу это исправить? JSfiddle здесь: http://jsfiddle.net/KVrFM/2/Выпадающее меню CSS при пересканировании меню

CSS

#header_dropdown { 
    float: right; 
} 
.click-nav { 
    width: 200px; 
} 
.click-nav ul { 
    position: relative; 
} 
.click-nav ul li { 
    position: relative; 
    list-style: none; 
    cursor: pointer; 
} 
.click-nav ul li ul { 
    position: absolute; 
} 
.click-nav ul .clicker { 
    position: relative; 
    background: #2284B5; 
    color: #FFF; 
} 
.click-nav ul .clicker:hover, .click-nav ul .active { 
    background: #196F9A; 
} 
.click-nav ul li a { 
    transition: background-color 0.2s ease-in-out; 
    -webkit-transition: background-color 0.2s ease-in-out; 
    -moz-transition: background-color 0.2s ease-in-out; 
    display: block; 
    background: #FFF; 
    color: #333; 
    text-decoration: none; 
} 
.click-nav ul li a:hover { 
    background: #F2F2F2; 
} 
/* Fallbacks */ 
.click-nav .no-js ul { 
    display: none; 
} 
.click-nav .no-js:hover ul { 
    display: block; 
} 
.active ul { 
    padding: 0; 
} 

JavaScript

$(function() { 
    $('.click-nav > ul').toggleClass('no-js js'); 
    $('.click-nav .js ul').hide(); 
    $('.click-nav .js').click(function (e) { 
     $('.click-nav .js ul').slideToggle(200); 
     $('.clicker').parent().toggleClass('active'); 
     e.stopPropagation(); 
    }); 
    $(document).click(function() { 
     if ($('.click-nav .js ul').is(':visible')) { 
      $('.click-nav .js ul', this).slideUp(); 
      $('.clicker').removeClass('active'); 
     } 
    }); 
}); 

HTML

<div id="header_dropdown"> 
    <div class="click-nav"> 
     <ul class="no-js"> 
      <li> <a href="#" class="clicker">Profile</a> 

       <ul> 
        <li><a href="#">Dashboard</a> 

        </li> 
        <li><a href="#">Settings</a> 

        </li> 
        <li><a href="#">Privacy</a> 

        </li> 
        <li><a href="#">Help</a> 

        </li> 
        <li><a href="#">Sign out</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 
+0

У вас нет верхнего и левого css для выпадающего списка, это, вероятно, преступник. – drip

ответ