CODEWITHSUNDEEP
htmlcss
Dianabolz
Dianabolz

Reputation: 79

padding keeps overlapping navigation bar link

i am trying to make it so i can create my navigation link padding larger but when i do so, the padding just overlaps the navigation bar, for example when i change padding:0.03em to 10px it will overlap the topnav div? how do i stop this, also why does float:left change the background color of the nav bar? here is my code

#topnav { background-color:#333333; clear:both; width:100%; }
#topnav ul { margin:0px; background-color:#333333; }
#topnav ul li { display:inline; }
#topnav ul li a {  padding:0.03em 20px; font-size:1.05em; font-family:verdana; }

Upvotes: 1

Views: 1368

Answers (1)

drip
drip

Reputation: 12933

You are adding padding to an inline element and inline elements don't like padding-top and bottom, so you should make your links block:

#topnav ul li a { display: block; }

Or if you wan't to keep them inline:

#topnav ul li a { display: inline-block; }

Upvotes: 2

Related Questions