CODEWITHSUNDEEP
csstwitter-bootstrap-3
Le Qs
Le Qs

Reputation: 805

Removing the background of a vertical menu li element on hover

I have this vertical that i am trying to customize

<ul class="tracking_nav nav nav-tabs nav-stacked">  
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">  
<a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span></li>     
<li><a href="#">Tutorials</a></li>  
<li><a href="#">Practice Editor </a></li>   
<li><a href="#">Gallery</a></li>   
<li><a href="#">Contact</a></li>   
</ul>

This is the css

moving_status{
        float:right;
        color:#76EE00;
        font-weight:bold;
        }
        .linkso{margin-left:13px;}
        .topinfo{
        display:inline-block;
        margin-bottom:5px;
        }
        .linkso > a{
        margin-right:4px;
        }

This is the fiddle https://jsfiddle.net/codebreaker87/eoo87zkk/

I have tried .tracking_list_type > li:hover{background-color:none !important;} but i cant seem to target the li element.How can i fix this?.

Upvotes: 0

Views: 21

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78540

You need to target hover backgrounds with :hover. For your case, you need the following:

.nav-tabs>li>a:hover

However I would recommend

.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover

Upvotes: 3

Related Questions