, когда мышь наводится на выпадающее меню на странице сдвинута

Я пытаюсь разработать веб-сайт, который содержит выпадающее меню, а в следующем подразделении ниже находится ползунок, но когда мышка наводится на меню, отображается подменю и слайдерное деление сдвигается вниз., когда мышь наводится на выпадающее меню на странице сдвинута

Так может кто-нибудь подскажет, как я могу выполнить задачу код выглядит следующим образом

<html> 
<head> 
<style type="text/css"> 
#header{ 
    height: 90px; 
} 
#navigation{ 
    height: 30px; 
    background-color: #0099FF; 
    border: 1px solid #0099FF; 
    border-radius: 10px; 
    z-index:1000; 
} 
ul { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
    padding-right: 40px;  
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    padding: 5px 10px 5px 10px; 
    text-decoration: none; 
    color: #FFFFFF; 
    font:Verdana, Arial, Helvetica, sans-serif; 
    font-size: 20px; 
} 
ul li a:hover { 
    background: #00CCFF; 
} 
li:hover ul { 
    display: block; 
    z-index: 1000; 
} 
li:hover li { 
    float: none; 
} 
li:hover a { 
    background: #00CCFF; 
} 
li:hover li a:hover { 
    background: #D2F5FF; 
} 
#drop-nav li ul li { 
    border-top: 0px; 
} 
#clearmenu{ 
    clear: left; 
} 
#sliderandnews{ 
    height: 300px; 
} 
#slidermain{ 
    height: 300px; 
    width: 65%; 
    float: left; 
} 
#news{ 
    height: 300px; 
    width: 33%; 
    border: 2px solid #F0FFFF; 
    border-radius: 20px; 
    float: right; 
    background-color: #F0FFFF; 
} 
.clear{ 
    height: 40px; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
</div> 
<div id="navigation"> 
    <ul id="drop-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Academic Programs</a> 
      <ul> 
       <li><a href="#">BBA</a></li> 
       <li><a href="#">BCA</a></li> 
       <li><a href="#">BE</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Faculties</a></li> 
     <li><a href="#">Admission</a></li> 
     <li><a href="#">Downloads</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 
</div> 
    <div class="clear"></div> 
    <div id="sliderandnews"> 
     <div id="slidermain"> 
      This section is changes its position on mousehover 
     </div> 
     <div id="news"> 
     </div> 
    </div>   
</body> 
</html>

источник

2015-02-06 umesh brainser

Пожалуйста, разместите код, чтобы мы могли вам помочь. Вы можете проверить http://stackoverflow.com/help/how-to-ask, чтобы улучшить свои шансы ответить на ваш вопрос. –

Вы сначала попробовали? Если да, разделите ссылку jsfiddle или plunker. – Rajeshwar

Проблема заключается в том, что элементы являются относительными позиционируются. Итак, когда появится подменю, все элементы ниже смещены вниз. Вы можете добавить абсолютное позиционирование в панель навигации и определить его смещение сверху, используя свойство top в CSS. Это позволяет устранить #header (у которого есть только роль, чтобы получить максимальный запас).

#navigation{ 
    position:absolute; 
    top:90px; 
}

Аналогично вы можете сделать с #sliderandnews блока. Поскольку вы указали абсолютное позиционирование в меню навигации, навигация удаляется из элементов HTML внутри страницы. Чтобы компенсировать это, вы должны добавить правильный верхний край для этого элемента.

#sliderandnews{ 
    height: 300px; 
    margin-top:190px; 
}

И вот окончательный fiddle.

источник

2015-02-07 11:23:28 Giorgio

Большое вам спасибо. Это сработало для меня @giorgio –

, когда мышь наводится на выпадающее меню на странице сдвинута

ответ

Смежные вопросы