Replicate hover effect in left sidebar - css

Question

I am trying to replicate the hover effects in my left navigation menu to my right sidebar as well. Currently, I have got so the hover box only covers the text. I want the hover box to fully cover the link area like in the left menu.
Website: http://chemipharmaceutical.com/wp/
CSS for the right side bar links:
#widget-link:hover, #widget-link.active {
background: none repeat scroll 0 0 #a00101;
line-height: 1.5rem;
}
.widget a, .widget a:link {
color: #fff;
padding: 10px 20px;
}
Any input is appreciated. Thank you

Answer 1

1) your #nav_menu-2 must have padding:0; (atleast for left and right)
2) your <a> in the menu must have display: block;
and that's it. Than you just have to play with margins and so one, to have identical spaces like in the left sidebar.

Answer 2

It looks like you are looking for the hover effects to be on the parent div, instead of the child div you are looking for.
Below is an example of a navbar with some transitions like the one you are looking at, and note the structure of it.
<li class="active">
<a href="#">
<span class="icon-home"></span>
<span class="text">home</span>
</a>
</li>
You are more than likely wrapping your hover effect around the <a> attribute, instead of the <li> tag
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Try a navbar like this example shows
It's even dynamic, as it collapses if the screen is resized.
$('li').click(function() {
$(this).addClass('active')
.siblings()
.removeClass('active');
});
* {
box-sizing: border-box;
}
body {
height: 100%;
background-color: #444;
}
h1 {
font-size: 1em;
text-align: center;
color: #eee;
letter-spacing: 1px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.nav-container {
width: 300px;
margin-top: 10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
height: 50px;
position: relative;
background: linear-gradient(#292929, #242424);
}
a {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid black;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
line-height: 50px;
color: #bbb;
text-transform: uppercase;
font-weight: bold;
padding-left: 25%;
border-left: 5px solid transparent;
letter-spacing: 1px;
transition: all 0.3s linear;
}
.active a {
color: #B93632;
border-left: 5px solid #B93632;
background-color: #1B1B1B;
outline: 0;
}
li:not(.active):hover a {
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^="icon"] {
position: absolute;
left: 20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
#media only screen and (max-width: 860px) {
.text {
display: none;
}
.nav-container,
a {
width: 70px;
}
a:hover {
width: 200px;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid black;
box-shadow: 0 0 1px 1px black;
}
a:hover .text {
display: block;
padding-left: 30%;
}
}
#media only screen and (max-width: 480px) {
.nav-container,
a {
width: 50px;
}
span[class ^="icon"] {
left: 8px;
}
}
<h1>Slowly resize screen to see the width transition</h1>
<div class="nav-container">
<ul class="nav">
<li class="active">
<a href="#">
<span class="icon-home"></span>
<span class="text">home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-user"></span>
<span class="text">about</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-headphones"></span>
<span class="text">Audio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-picture"></span>
<span class="text">Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-facetime-video"></span><span class="text">video</span>
</a>
</li>
</ul>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Without seeing your markup here (i don't do external site links, apart from jsfiddle/codepen), then it's hard to advise any further