CODEWITHSUNDEEP
htmlcssmenunavigationhover
user3022069
user3022069

Reputation: 397

CSS navigation bar link background color hover

I'm creating a navigation bar for a website and I want the menu elements to change background color when I hover the cursor over them. The color changing part works however, if I take a closer look at the nav bar when I hover the cursor over one menu element I can see that the nav bar (div) and the menu elements (a) aren't the same height. (The red rectangular isn't as high as the orange one.) It's just one px or so but it's really annoying. I used 20px padding for the height, but apparently something's wrong and I'm sure there's a better way to make it work. I'm new to web development and CSS by the way.

        div {
			background-color: orange;			
			padding: 20px;
		}
		a {
			padding: 20px;
		}
		a:hover {
			background-color: red;
		}
    <div>
		<a href="">Menu 1</a>
		<a href="">Menu 2</a>
	</div>
Thanks for your help in advance.

Upvotes: 0

Views: 1839

Answers (1)

Andi North
Andi North

Reputation: 897

Have you tried:

div {
    background: orange;
}

a {
    display: inline-block;
    padding: 20px;
}

By setting display: inline-block; on your <a>, the padding should behave as required.

Upvotes: 1

Related Questions