Issue with my Navbar Dropdown(not bootstrap)

Issue with my Navbar Dropdown(not bootstrap)
0

#1

Hello Fellow Campers!

I am really trying to put a lot of polish on my portfolio, and I have learned A LOT in the process. With that being said, I am still new to this stuff and I am unable to find the source of this issue.

The problem: I am using a fixed navbar that displays a drop down menu on :hover. When you scroll over the “Skills” section the size of the background box behind the text is too big( nav ul li ul a’s). I can’t seem to fix it no matter how much I mess with the css. I believe the issue stems from the positioning attributes I used (I still have a very vague understanding of how they interact, especially when you start nesting things).

I apologize if the code is messy, I have literally been throwing everything and the kitchen sink at this without cleaning up after myself. :sweat_smile:

Link to codepen:

Thanks so much for all of your help!


#2

hello jjhugej,

// problem: you're selecting all anchor tags inside `nav`
nav ul li a {
  line-height: 80px;
}

// you could also simplify your selectors
nav ul li a {} => nav a {} // select all anchors
nav ul li ul li a {} => nav ul ul a {} // select dropdown anchors

// select first level anchors
nav>ul>li>a {}

also, unitless line heights


#3

/facepalm

THANK YOU SO MUCH!!!

I had no idea you could forego the units on line-heights. Very very cool/useful!