Reputation: 243
I am trying to get my menu item hover state to be like it is in the screenshot below, but so far I haven't had any luck. I posted a screenshot below of what it currently looks like, and what I need it to look like. I tried increasing the size of the <li>
and <a>
elements but it didn't work. Any help would be greatly appreciated!
Currently:
What it needs to look like:
HTML:
<div class="col2">
<div class="mainnav">
<ul id="menu-global" class="menu">
<li class="menu-item current-menu-item">
<a href="www.google.com">Home</a>
</li>
<li class="menu-item">
<a href="www.google.com">Get Involved</a>
</li>
<li class="menu-item">
<a href="www.google.com">Resources</a>
</li>
<li class="menu-item">
<a href="www.google.com">Contact</a>
</li>
</ul>
</div>
</div>
CSS:
.header .col2 {
width: auto;
float: right;
text-align: center;
margin: 50px auto;
font-size: 115%;
padding-right: 65px;
}
.header ul {
list-style-type: none;
display: inline-block;
margin: 0 auto;
padding: 0;
line-height: 43px;
}
.header ul li {
list-style-type: none;
margin: 0px;
margin-right: 7px;
float: left;
}
.header .col2 ul li a {
color: #30302E;
display: block;
text-transform: uppercase;
padding-right: 5px;
padding-left: 5px;
text-align: center;
font-family: 'Merriweather', Verdana;
}
.header .col2 ul li a:hover {
background-color: #ECF0F1;
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.45);
}
Upvotes: 1
Views: 25
Reputation: 8375
You have to remove the vertical margin from the col2 and add a padding-top instead to the link inside the list-element:
.header .col2 {
width: auto;
float: right;
text-align: center;
margin: 0px auto;
font-size: 115%;
padding-right: 65px;
}
.header .col2 ul li a {
color: #30302E;
display: block;
text-transform: uppercase;
padding-right: 5px;
padding-top:50px;
padding-left: 5px;
text-align: center;
font-family: 'Merriweather', Verdana;
}
Upvotes: 2