NavDropDown

HTML & CSS
1

I made a drop down for my nav on one of my links but when I hover it does not stay
relative to the link and it shifts to the right instead of aligning itself to the right of the hover.
Codepen

2

Hints:

  1. You gave a y-plane coordinate (top) but not an x-coordinate (e.g. right or left).
  2. You need to make the position:absolute dropdown base it’s positioning off the <li> elements.
3

I got it :wink:

#box ul ul {
  margin:0;
  padding:0;
  line-height:30px;
  
}

#box ul li{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}

#box ul ul li a{
 background-color: #da272f;
  height:40px;
  width:200px;
  display:block;
  padding:5px;
  
}

#box ul ul{
  position:absolute;
  visibility:hidden;
  top:40px;
  left:0px;
}

#box ul li:hover ul{
  visibility:visible
}
4

Hi, I’d recommend to use a “full length” value more reliable for position instead of “40px” below:

#box ul ul{
  position:absolute;
  visibility:hidden;
  top:100%; <-- the full of any current length from top
  left:0px;
}

Try zoom or change font-size to test. :smiley:

1 Like
5

I’m slow today, apparently.

The hide sublist visibility method isn’t good, it’s still there.
The usual way is to move its position out of sight/window. Like:

#box ul ul{
  position:absolute;
  left:-9999px;
  top:100%;
}

#box ul li:hover ul{
  left:0;
}
6

I dont see it. Website

7

Thats the point. :slight_smile:

8

Yeah I only see it when I hover over it

9

Can pull your leg when you least expect. Try test:

#box ul li ul *{
  visibility:visible
 /* left:0;*/
}
10

Im not sure what your talking about I just needed to hide the lise before
hovering over it…

11

You do as you see fit of course, I’m not too clear I think. :wink:

I meant to say that the visibility hidden on it e.g. can’t stop child elements to become visible in front of things. Positioned out of window can.

12

it would be great if you showed me an example. I think I know what your saying…

13

I just thought I did that. :wink:
Try this as an example. For some reason in the future you set the visibiliy on something that happens to also be in that sublist:

a{
  visibility:visible;
}
    
#box ul li ul{
  visibility:hidden;
 /* left:-9999px; */
}
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.