CODEWITHSUNDEEP
css
pr0cz
pr0cz

Reputation: 507

Change background colour of ul li

I struggle with the problem, that I want to change the background colour of my ul item, when the li is clicked. So, I open a dropdown menu, click on the li link, and now I want that the mainmenuslot changes its backgroundcolor.

I am working with this code:

#mainnav-menu ul li.current_page_item a, #mainnav-menu ul li.current-menu-item a {
    background-color: #004494;
    background: #004494;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

What do I have to add, to get this function? I tried it with #mainnav-menu ul a, #mainnav-menu ul, and a lot of other possibilities.

Upvotes: 0

Views: 9019

Answers (2)

Razvan Dumitru
Razvan Dumitru

Reputation: 12452

In addition to what @jacobdo said, you only have the possibility to access li focus and to change li background, color (as explained below) and so on, but you won't have the possibility to change ul background, color without javascript.

li:focus  {
  outline: 0;
   background-color: #004494;
    background: #004494;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}
<div id="menus">
    <ul>
        <li tabindex="0"><a href="#">Home</a></li>
        <li tabindex="0"><a href="#">Other</a></li>
        <li tabindex="0"><a href="#">My Page</a></li>
        <li tabindex="0"><a href="#">Other Page</a></li>
        <li tabindex="0" style="border-right:none;"><a href="#">Logout</a></li>
    </ul>
</div>

With jQuery:

http://jsfiddle.net/8zzc3oow/

With javascipt only:

http://jsfiddle.net/2jpehad9/

Of course jQuery and javascript change color events must be fulfilled when user clicks on the li link.

jQuery click - https://api.jquery.com/click

jQuery click example 

<div id="target">
  Click here
</div>
$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

js click example

<input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('clicked')">

<script>
// On mouse-over, execute myFunction
function myFunction() {
    document.getElementById("myCheck").click(); // Click on the checkbox
}
</script>

Upvotes: 1

jacobdo
jacobdo

Reputation: 1615

You cannot select parent of a child element via css (ul that has the li in it, in your case).

Here the easiest would be to change the background of your ul via javascript.

Upvotes: 0

Related Questions