How to make sub menu float over div?

Question

Hello all I have a sub menu that with a drop down menu but when the menu comes down it pushes the div below down. Any idea on how to fix so it loads over div?

and also one is horizontal and one is vertical how to fix that aswell thanks!

JSFiddle

    <ul class="proda">
    <li><a href="#" data-filter="*" class="current">All Categories</a></li>

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

    <li><a>Brands</a><b class="caret2"></b>
      <ul>
        <li><a href="#" data-filter=".ses" class="current">LA Sesso</li>
        <li><a href="#" data-filter=".isa" class="current">Issah</li>
        <li><a href="#" data-filter=".ant" class="current">Antonio</li>
      </ul>           
    </li>
    <li><a href="#" data-filter=".seas">Seasonal</a></li>
    <li><a href="#" data-filter=".bnew">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;

}

score 2 · Accepted Answer · answered Jul 22 '14 at 08:49

2

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

change this in your css

answered Jul 22 '14 at 08:49

Sweetz

344
1
4
17

Worked Thanks, any idea how to make it float above the div? – alfonsotorino Jul 22 '14 at 08:52
check the updated fiddle for your ans and make sure you mark your correct ans so that other users will get to know the ans – Sweetz Jul 22 '14 at 08:55
updated the fiddle you provided, i have marked my changes, now it'll be easy for you to c the cahnges – Sweetz Jul 22 '14 at 09:04
yes ofcourse, but do you know how to make the dropdown float over the div and not behind it? thanks – alfonsotorino Jul 22 '14 at 09:07
elaborate.. as in float over means how you want? – Sweetz Jul 22 '14 at 09:07
I solved it by adding padding between thelowest point of the dorpdown and the next div because the menu was droping behind the div – alfonsotorino Jul 26 '14 at 02:40

score 1 · Answer 2 · answered Jul 22 '14 at 08:54

Your CSS is all wrong. Define a dropdown class:

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

Then give your line that class:

    <li class="dropdown"><a>Brands</a><b ></b>
  <ul>
    <li><a href="#" data-filter=".ses" class="current">LA Sesso</li>
    <li><a href="#" data-filter=".isa" class="current">Issah</li>
    <li><a href="#" data-filter=".ant" class="current">Antonio</li>
  </ul>           
</li>

And appropriately rearrange your navigation. Also, please use the nav tag.

score 0 · Answer 3 · answered Jul 22 '14 at 08:49

0

try this code

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

answered Jul 22 '14 at 08:49

Alex Wilson

2,421
11
13

score 0 · Answer 4 · answered Jul 22 '14 at 08:50

0

Yoo must change position of sub-menu to absolute. DEMO

answered Jul 22 '14 at 08:50

Anon

2,854
14
18

score 0 · Answer 5 · answered Jul 22 '14 at 08:51

0

use position absolute for submenu ul

 proda li:hover ul {
 position: absolute;}

and position relative for menu li

proda li{ position: relative;}

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

answered Jul 22 '14 at 08:51

score 0 · Answer 6 · answered Jul 22 '14 at 08:52

0

JSFIDDLE

Remove position:relative from .proda li:hover ul instead use position:absolute.

So your css code will be like following:

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

answered Jul 22 '14 at 08:52

Husen

955
1
6
16

score 0 · Answer 7 · answered Jul 22 '14 at 09:06

Change remove property position: relative; from your selector .proda li:hover ul to get

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

Then add this other selector

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

How to make sub menu float over div?

7 Answers7

Linked