CODEWITHSUNDEEP
htmlcsshover
flash
flash

Reputation: 1517

How to hover the complete row in css?

I have a screenshot as shown below which I have replicated in HTML, CSS and JS.

enter image description here

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><a href="#">View Status</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
                <li><a href="#">Release Bills</a></li>
                <li><a href="#">Add Attendee</a></li>
                <li><a href="#">Export as</a></li>
                <li><a href="#">View in Google Sheets</a></li>
                <li><a href="#">Send Notifications</a></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.

Upvotes: 1

Views: 66

Answers (4)

Somebody
Somebody

Reputation: 72

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

Upvotes: 1

Simple Theory
Simple Theory

Reputation: 78

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

Upvotes: 1

yaakov
yaakov

Reputation: 4655

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.

Upvotes: 2

Liftoff
Liftoff

Reputation: 25392

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/

Upvotes: 3

Related Questions