Reputation: 79
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
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