How to hover the complete row in css? - html

Question

I have a screenshot as shown below which I have replicated in HTML, CSS and JS.
I have created the fiddle for the above screenshot. The above screen-shot portion is at the extreme right in the fiddle. On clicking three dots, the drop-down menu appears.
The HTML and CSS codes which I have used in order to create the drop-down is:
HTML:
<div class="nav-top-searchbar">
<form>
<span class="fa fa-search searchicon fa-lg" aria-hidden="true"></span>
<input type="text" name="search">
<div style="">
<img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
<div class="dropdown">
<li>View Status<i class="fa fa-angle-down" aria-hidden="true"></i></li>
<li>Release Bills</li>
<li>Add Attendee</li>
<li>Export as</li>
<li>View in Google Sheets</li>
<li>Send Notifications</li>
</div>
</div>
</form>
</div>
CSS:
// General CSS
.nav-top-searchbar {
position: relative;
}
#ellipsis {
top: 12px;
position: absolute;
right: 43px;
cursor: pointer;
}
#ellipsis:focus {
outline: none;
}
#ellipsis:focus+.dropdown {
display: block;
}
input[type=text] {
width: 100%;
background: #10314c;
}
.dropdown {
background-color: #FFFFFF;
display: none;
padding-left: 2%;
position: absolute;
/* height: 150px; */
right: 0;
width: 200px;
z-index: 10;
list-style-type: none;
padding-top: 25px;
padding-bottom: 25px;
box-shadow: 0 0 15px #888;
top: 2px;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
border: 1px solid #FFFFFF;
z-index: 2;
padding: 3px;
}
.dropdown a {
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li:hover {
background-color: #EDEDED;
}
Problem Statement:
In my fiddle, the hover doesn't cover the entire row. It only covers 80% of the row. I am wondering what changes do I need to make in the above CSS codes so that the hover covers the entire row.

Answer 1

You have padding on your dropdown container:
.dropdown{
padding-left: 2%;
}
This space is unusable by the child list items. Put the padding on the list items instead:
.dropdown li{
padding-left: 2%;
}
https://jsfiddle.net/nc2djn5p/94/

Answer 2

This should do the trick: https://jsfiddle.net/hp0hxoL3/
.dropdown {
background-color: #FFFFFF;
display: none;
padding-left: 2%;
position: absolute;
/* height: 150px; */
right: 0;
width: 200px;
z-index: 10;
list-style-type: none;
padding-top:25px;
padding-bottom:25px;
box-shadow: 0 0 15px #888;
top: 2px;
list-style: none;
padding: 0;
margin: 0;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
border: 1px #FFFFFF;
z-index: 2;
}
.dropdown a
{
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li {
padding: 8px;
}
.dropdown li:hover
{
background-color: #EDEDED;
}
It doesn't match exactly the example, but it's close enough.

Answer 3

Your div class="dropdown" has a left padding of 2%. You will need to set it to 0.

Answer 4

As David said, set the padding in .dropdown li, instead of .dropdown