Как сделать подменю float над div?

Привет всем, у меня есть подменю, которое с выпадающим меню, но когда меню спускается, он подталкивает div ниже. Любая идея о том, как исправить, чтобы она загружалась над div?

а также один горизонтальный и один вертикальный, как исправить это, а спасибо!

JSFiddle

<ul>
 <li><a href="#" data-filter="*" target="_blank">All Categories</a></li>

 <li>Styles
 <ul>
 <li><a href="#" data-filter=".slim" target="_blank">Slim</a></li>
 <li><a href="#" data-filter=".loose" target="_blank">loose</a></li>
 <li><a href="#" data-filter=".pro" target="_blank">proffesional</a></li> 
 </ul> 
 </li>

 <li>Brands
 <ul>
 <li><a href="#" data-filter=".ses" target="_blank">LA Sesso</a></li><a href="#" data-filter=".ses" target="_blank">
 </a><li><a href="#" data-filter=".isa" target="_blank">Issah</a></li><a href="#" data-filter=".isa" target="_blank">
 </a><li><a href="#" data-filter=".ant" target="_blank">Antonio</a></li><a href="#" data-filter=".ant" target="_blank">
 </a></ul><a href="#" data-filter=".ant" target="_blank"> 
 </a></li><a href="#" data-filter=".ant" target="_blank">
 </a><li><a href="#" data-filter=".seas" target="_blank">Seasonal</a></li>
 <li><a href="#" data-filter=".bnew" target="_blank">New</a></li>
</ul>
.proda{
 display: table-row;
 list-style: none;
}


.proda li ul { 
 background: #ccc;
 display: none; 
}

.proda li{
 display: table-cell;
 padding: 15px;
} 

.proda li a:hover{
 color: blue;
}

.proda li:hover ul { 
 position: relative;
 display: block; 
 z-index: 1;
 }

 display: block;
 background-color: #ecf0f1;

}
7 ответов

.proda li:hover ul { 
 position: absolute; //Changed
 display: block; 
 z-index: 1;
 }

измените это в своем css


Ваш CSS не прав. Определите класс выпадающего списка:

.dropdown{
 position: absolute;
display: none;
z-index: 99;
width: 150px;
}

Затем дайте вашей строке этот класс:

<li>Brands
 <ul>
 <li><a href="#" data-filter=".ses" target="_blank">LA Sesso</a></li><a href="#" data-filter=".ses" target="_blank">
 </a><li><a href="#" data-filter=".isa" target="_blank">Issah</a></li><a href="#" data-filter=".isa" target="_blank">
 </a><li><a href="#" data-filter=".ant" target="_blank">Antonio</a></li><a href="#" data-filter=".ant" target="_blank">
 </a></ul><a href="#" data-filter=".ant" target="_blank"> 
</a></li>

И соответствующим образом перестройте свою навигацию. Кроме того, используйте тег nav.


Изменить удалить position: relative; свойства position: relative; из вашего селектора .proda li:hover ul получить

.proda li:hover ul {
 display: block;
 z-index: 1;
 }

Затем добавьте этот другой селектор

.proda>li>ul{
 position: absolute;
 }


Yoo должен изменить position подменю на absolute. DEMO


попробуйте этот код

.proda li:hover ul {
 display: block;
 position: absolute;
 z-index: 1;
}


абсолютная позиция использования для подменю ul

proda li:hover ul {
 position: absolute;}

и относительное положение для меню li

proda li{ position: relative;}

http://jsfiddle.net/akash4pj/pc4xC/5/


JSFIDDLE

Удалить position:relative от .proda li:hover ul вместо использования position:absolute.

Таким образом, ваш код css будет выглядеть следующим образом:

.proda li:hover ul { 
 position: absolute;
 display: block; 
 z-index: 1;
 }

licensed under cc by-sa 3.0 with attribution.