CODEWITHSUNDEEP
htmlcssdrop-down-menu
riogrande
riogrande

Reputation: 349

absolutely positioned submenu with top property not working

Im have a problem with submenu which has position:absolute; and top:5em;. The submenu is hidden until you hover over parent (li element). Everything is working but when you hover over parent (li element) the submenu (li > ul element) is shown but you cant mouse-over (access) it because it's disappearing when mouse leaves parent (li element) area.

I found out that the top: 5em; is doing a "break" between LI and UL. When i try to reduce the top: 5em; to for instance top: 1em; (size where UL is just on border of parent (li element) or for instance goes a bit into parent (li element), then the menu is working!!

But i need it to have the top of my choice and still working.

How to achieve this with position:absolute and top properties?

Live demo: http://codepen.io/riogrande/pen/bEGzXm

Upvotes: 1

Views: 40

Answers (2)

riogrande
riogrande

Reputation: 349

Solution based on Av Avt's answer

Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:

&:before {
        content: '';
        display: none;
        width: 100%;
        height: 5em;
        position: absolute;
        top: 100%;
        left:0;
}

And then when you hover over parent <li> display it as block so it fills the gap ONLY when parent <li> is hovered (active)

&:hover {
        &:before {
          display:block;
        }
        > ul {
          display: block;
        }
      }

Anyway thanks to @av-avt !! Without you i would not figure it out!

Upvotes: 0

AVAVT
AVAVT

Reputation: 7133

I find it strange you found the exact root cause of the problem, but has yet to figure out the fix.

Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:

&:before{
    content: '';
    display: none;
    width: 100%;
    height: 5em;
    position: absolute;
    left: 0;
    top: 0;
  }
  &:hover:before{
    display:block;
  }

Demo: http://codepen.io/anon/pen/mVdgdo

Edited: Answer edited to cover issue with insights from the OP himself.

Upvotes: 1

Related Questions