Navbar подменю выталкивает содержимое вниз

У меня есть navpar сделанное CSS, но когда показывают подменю NavBar толкает содержание под внизNavbar подменю выталкивает содержимое вниз

Это ссылка на codepen с полным кодом https://codepen.io/muhamedhashem/pen/GqNQaE

изображение

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> </title> 
    <link href="style.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="nav"> 
     <ul> 
      <li><a href="#">One</a></li> 


      <li> 
       <a href="#"> 
        Two 
        <i class="fa fa-arrow-circle-down"></i> 
       </a> 
       <ul> 
        <li><a href="#">Two #1</a></li> 
        <li><a href="#">Two #2</a></li> 
        <li><a href="#">Two #3</a></li> 
       </ul> 
      </li> 


      <li> 
       <a href="#"> 
        Three 
        <i class="fa fa-arrow-circle-down"></i> 
       </a> 
       <ul> 
        <li><a href="#">Three #1</a></li> 
        <li><a href="#">Three #2</a></li> 
        <li><a href="#">Three #3</a></li> 
       </ul> 
      </li> 


      <li> 
       <a href="#"> 
        Four 
        <i class="fa fa-arrow-circle-down"></i> 
       </a> 
       <ul> 
        <li><a href="#">#1</a></li> 
        <li><a href="#">#2</a></li> 
        <li><a href="#">#3</a></li> 
        <li><a href="#">#4</a></li> 
       </ul> 
      </li> 


      <li> 
       <a href="#"> 
        Five 
        <i class="fa fa-arrow-circle-down"></i> 
       </a> 
       <ul> 
        <li><a href="#">Five #1</a></li> 
        <li><a href="#">Five #2</a></li> 
        <li><a href="#">Five #3</a></li> 

       </ul> 
      </li> 
     </ul> 
    </div> 
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1> 
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1> 
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1> 
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1> 


</body> 
</html>

CSS

.nav { 
    width:900px; 
    margin: 0 auto} 

ul{ 
    margin: 0; 
    padding: 0; 
    list-style-type:none; 
text-align:center;} 


ul li{ 
    float:left; 
    width:180px;} 






li ul{ display:none;} 

li:hover ul{ 
    display:block;} 




ul li a{ 
    display:block; 
    padding: 5px 15px 5px 15px; 
    background:#69F; 
    color:#ffffff; 

    border-top: 1px solid #FFF; 
    margin-left:1px;} 



ul li a:hover{ 
    background:#F80; 
    color:#fff} 


h1 { 
clear:both; 
}

источник

2016-06-22 user4833581

Это связано с тем, что сам навигатор растет по высоте. Если вы хотите, чтобы навигационная панель перекрывала содержимое, просмотрите z-индекс и абсолютный дисплей.

li:hover ul{ 
    position:absolute; 
    z-index: 10; //can be any number higher than the content's z-index. 
    width: 180px; //This controls the size of the dropdowns container 
    display:block; 
}

источник

2016-06-22 16:24:45

он работает, когда добавляется ко второй ul (позиция absulte), но sub li не отображается вертикально – user4833581

Я добавил код для вас выше. –

Ваше подменю должно быть установлено в положение абсолютное, а родительский LI должен быть установлен в положение relative. Вы должны установить видимость на скрытый, а затем показать его для: hover. Этот метод не будет вытеснять контент.

Кроме того, вы должны убедиться, что вы установили ширину в подменю ul li ul < ---.

источник

2016-06-22 20:01:30

Navbar подменю выталкивает содержимое вниз

ответ

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