wordpress navigation (own theme)

Question

I try to create a navigation with a hover effect. That my source code:

<div id="nav">
        <nav id="mainnav" class="clearfix">


<div class="menu-mytheme-container"><ul id="menu-mytheme" class="menu"><li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-98"><a href="http://mysite.ch/mainmenu/">MAINMENU</a>
    <ul class="sub-menu">
        <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://mysite.ch/submenu1/">Sumenu1</a></li>
        <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://mysite.ch/submenu2/">Sumenu2</a></li>
    </ul>
...


#nav{
    width:250px;
    margin:20px 0 0 20px;
    float:left;
}

#menu-mytheme{
    margin:0; 
    padding:0; 
    overflow:hidden; 
    list-style-type:none;
    float:left;
}
ul#menu-mytheme a{
    list-style-type:none;
    text-decoration:none;
}
ul.sub-menu{
    list-style-type:none;
    display:none;
}
ul#menu-mytheme a:hover ul.sub-menu{
    display:block;
    color:red;
}

I tried different options in my style.css, but nothing works... :-( Does somebody have experience in creating menus with hover in wordpress.

Greets, yab86

Answer 1

You can try:

.sub-menu li a:hover
{
   color:red;
}

or change

ul#menu-mytheme a:hover ul.sub-menu{
    display:block;
    color:red;
}

to

ul#menu-mytheme li ul.sub-menu li a:hover {
    display:block;
    color:red;
}

Which should give the links a red colour.