Submenu hover parent element

Question

Well the title is kinda confusing, but I'll try to explain what I need.

I have this code:

<nav class="main-nav">
    <ul class="dropdown-menu">
        <li class="tab">
            <a href="graphic-design.php" title="Diseño Grafico">Diseño Grafico</a>
        </li><li class="tab">
            <a href="other-services.php" title="Otros Servicios">Otros Servicios</a>
             <div class="submenu"></div>
        </li><li class="tab">
             <a href="support.php" title="Soporte Tecnico">Soporte</a>
        </li>
    </ul>
</nav>

With it's corresponding CSS code (Example):

Example on jsFiddle

It works great, but what I want to do now is to make the elements with class tab to highlight when I'm over the submenu. I don't want to use JS cuz' I now how to do it, but I want to do it using CSS but I don't know how. Is there a way to do it?

Thank you.

@MoisesZaragoza The CSS is within the example link. Is long, that's why is not here. — Andrés Orozco, Sep 21 '13 at 12:42
@AndresOrozco people should not have to go to another site to be able to see your code. and if its here it wont change or be missing in a year — MZaragoza, Sep 21 '13 at 12:44
@MoisesZaragoza I did it because is too long, and I'm using jsFiddle to provide an example and to post the long code. — Andrés Orozco, Sep 21 '13 at 12:45

score 1 · Answer 1 · edited Sep 21 '13 at 13:06

1

Just move the hover state to the list item rather than the anchor

.main-nav > ul > li:hover{
    color: #008293;
    background: #ADADAD;
}

Example

edited Sep 21 '13 at 13:06

Syon

6,625
5
33
40

answered Sep 21 '13 at 12:46

Paulie_D

95,305
9
106
134

It worked really well, the only thing is the color of the text, it doesn't change. I would like to make the color to change to, but I can't do it. – Andrés Orozco Sep 21 '13 at 13:07
I find it easier to give each level a class rather than user those deep selecotors. Here's a reference menu I keep around: **[Codepen](http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294)** – Paulie_D Sep 21 '13 at 13:37

Chanckjh · Answer 2 · 2013-09-21T12:48:34.800

0

do u mean something like this?

.tab:hover .child{
   do something here
}

UPDATE

it's not possible to change the parent when you hover over the child, with CSS

edited Sep 21 '13 at 12:48

answered Sep 21 '13 at 12:42

Chanckjh

2,504
2
20
28

No, I want to make the parent to highlight not the child. – Andrés Orozco Sep 21 '13 at 12:44
oh, u want the parent to highlight when u hover over the child? That's not possible with css – Chanckjh Sep 21 '13 at 12:44
I guess w/o using js its not possible. Better use jQuery – Faisal Mq Sep 21 '13 at 12:46

Submenu hover parent element

2 Answers2