CODEWITHSUNDEEP
htmlcsssass
Ayesha
Ayesha

Reputation: 905

Style li tag with Sass doesnt work (hover effect for li tag)

I have the following HTML code:

<button class='drpDwnRp'>Select...<span class='caret'></span></button> 
<ul class='dropdown-menu'> 
    <li><a><i class='glyphicon glyphicon-ok'></i>SELECT All</a></li> 
    <li><a><i class='glyphicon glyphicon-remove'></i>DELETE All</a></li> 
    <li class='divider'></li> 
    <li><a>LIST here</li> 
</ul>

Can someone please let me know how to style with Sass?

I tried the following and it didn't work. Any suggestions are welcome.

.drpDwnRp{
    @extend .drpDwn;
    color: white;
    text-align:left;
    background-color: red;

    .caret {
        margin-left:169px;
        color:black;
    }

    li:hover {
        background-color:red;
    }
}

Styling for .drpDwnRp and .caret works.

Upvotes: 0

Views: 638

Answers (2)

cocoa
cocoa

Reputation: 3921

Two things:

  1. li is not a child of .drpDwnRp, so li:hover should not be nested inside that class, but .dropdown-menu instead

  2. You are missing </a> on the last li

.drpDwnRp {
    @extend .drpDwn;
    color: white;
    text-align:left;
    background-color: blue;
}
.drpDwnRp .caret {
    margin-left:169px;
    color:black;
}
.dropdown-menu li:hover {
    background-color:red;
}
<button class='drpDwnRp'>Select...
    <span class='caret'></span>
</button>
<ul class='dropdown-menu'>
    <li>
        <a><i class='glyphicon glyphicon-ok'></i>SELECT All</a>
    </li>
    <li>
        <a><i class='glyphicon glyphicon-remove'></i>DELETE All</a>
    </li>
    <li class='divider'></li>
    <li><a>LIST here</a></li> 
</ul>

Upvotes: 1

nnn
nnn

Reputation: 338

The <li> element is outside of .drpDwnRp, that's why your code fails. You should do this: 

.dropdown-menu {
    li:hover {
        background-color:red;
    }
}

That's how your <li> will be formatted as you want. Have fun!

Upvotes: 1

Related Questions