HTML/CSS Li a hover after ul

Question

I know how to display submenu. I need that li a home link, would be different color when my cursor is on submenu ... Hope you will understand what I am saying.

I Thought and tried that #menu li a:hover >ul but not working.

Sample of html menu:

<li><a href=# >home</a>
   <ul class="submenu">
    <li><a href=# >sub</a></li>
    <li><a href=# >sub</a></li>
   </ul>
</li>

Answer 1

You need to use the parent li 's :hover pseudo class.

jsFiddle

CSS:

#homeMenu:hover #homeLink {
    color: blue;
}

HTML:

<ul>
    <li id="homeMenu">
        <a href="#" id="homeLink">home</a>
        <ul class="submenu">
            <li><a href="#">sub</a>
            </li>
            <li><a href="#">sub</a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

You were on the right way:

#menu li ul { display: none; }

#menu li:hover ul { display: block; }

#menu li > a { color: black; }

#menu li > a:hover { color: blue; }

Answer 3

Well I think this does what you want. Can't imagine how it would be useful, though.

HTML:

<a href="#" >home</a>
<ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
</ul>

CSS:

ul{
    display: none;
}
a:hover + ul{
    display: block;
}

Fiddle: http://jsfiddle.net/hmvw4tjc/