How do i higlight parent when child is selected?

Question

I got a menu with childs.
I want to change the background on parent and child when a child is picked, and only change the background on parent when parent is picked.

I've searched for it, but it seems like it just wont work. And i know that many have asked this question. I've tried doing it with jquery, but i can't get it right.

My code so far is following:

HTML

<div class="menu">
  <ul>
    <li><a id="home" href="index.php">Home</a></li>
    <li><a href="Programming.php">Programming Language</a>
      <ul>
        <li><a href="Programming_HTML.php">HTML</a></li>
      </ul>
    </li>
    <li><a href="Project.php">Project</a>
      <ul>
        <li><a href="Project_Calculator.php">Calculator</a></li>
        <li><a href="Project_ImageSlider.php">Image Slider</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

.menu { font-family: arial, sans-serif; width:1190px; text-align: center; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;  height:51px; text-align:center; color:#000; background:#ddd; line-height:50px; font-size:15px; overflow:hidden; box-shadow:inset 0 0 10px #000000;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative; background: #F16529; width: 238px;}
.menu ul li ul {display: none;}
.menu ul li ul li a{ background:#36f;}
.menu ul li ul li{margin-left: 10px; width: 215px; border-left: 1px solid #000; border-bottom: 1px solid #000; }
.menu ul li a{border-right: 1px solid #000;}
#home{border-left: 1px solid #000;}
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:51px; left:0;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#FF6A00; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

When it comes to the jquery, i'm thinking clickfunction.
I also know that i need to add an active class in the css.
You are welcome to check the menu out, it goes great with this div, around it.

#top-wrap{float:center; width: 100%; height: 51px; display: block; background-color: #000; -webkit-box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.1); box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.6);}

possible duplicate of [How to style the parent element, when hovering a child element?](http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element) — NGLN, Oct 30 '13 at 18:26
maybe you can show us in a jsfiddle what you've got so far in jQuery? here I threw your code in a [fiddle](http://jsfiddle.net/UQXvZ/), add your jQuery code ... and maybe we can help you with a concrete problem. **[http://jsfiddle.net/UQXvZ/](http://jsfiddle.net/UQXvZ/)** — Martin Turjak, Oct 30 '13 at 18:43
http://jsfiddle.net/L94N6/4/
i got this example, but i can't get it working with my code, and also there is heavy much css! — user2060000, Oct 30 '13 at 19:11

score 1 · Answer 1 · answered Oct 30 '13 at 18:58

1

Do you want the BG to stay orange after a click, or return to blue? If the latter, simply add this to the CSS:

.menu ul li:active a {color:#fff; background:#FF6A00;}

this is the only thing i can figure with plain CSS...

answered Oct 30 '13 at 18:58

nicole

61
5

The BG on the parent when the parent is clicked to be red.
The BG on the child and parent to be red when the child is clicked. – user2060000 Oct 30 '13 at 19:14

How do i higlight parent when child is selected?

1 Answers1