Pure HTML/CSS menu with horizontal submenu. How keep parent 'a' background color?

I am building a pure HTML/CSS menu with a horizontal submenu. The problem is that when you are hovering on the submenu the background color from the hover of the main-menu item is gone.

Is it possible to keep that background color of the main menu item when you are hovering on the submenu?

Here is what I got so far:

http://jsfiddle.net/YKEkB/1/

As you can see when you hover over "this is the one" you get the submenu. But when you are in the submenu the background color of "this is the one" changes back.

Is there any solution with pure HTML/CSS?

This is all the code:

 <div class="wrapper">
    <div class="menu-holder">
        <ul class="menu">
            <li><a href="#" title="Home">item 1</a>
            </li>
            <li><a class="test" href="#">This is the one</a>

                <ul class="submenu">
                    <li><a href="#">Submenu item 1</a>
                    </li>
                    <li><a href="#">Submenu item 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" >Menu item 3</a>

            </li>
            <li><a href="#" >Last item</a>

            </li>
        </ul>
    </div>
</div>

css:

 .wrapper {
     width:900px;
     height:200px;
     background:grey;
 }
 .menu-holder {
     padding: 50px 0 0 0;
 }
 .menu-holder ul {
     margin: 0 0 0px 25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 10px 0 10px;
     margin: 0px 0 0 0px;
     border-left: 1px dotted white;
     line-height: 0px;
 }
 .menu-holder ul li a {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-style: bold;
     display: block;
     color: white;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li a:hover + ul {
     display: block;
 }
 .menu-holder ul li a:hover {
     display: block;
     background-color: #025179;
 }
 .menu-holder ul li .submenu {
     display: none;
     position: absolute;
     top: 100%;
     left: 0px;
     right: auto;
     margin: -5px 0 0px 0px;
     padding: 5px 10px 5px 10px;
     white-space: nowrap;
 }
 .menu-holder ul li .submenu li {
     position: static;
     float: left;
     display: inline;
     padding: 15px 10px 15px 10px;
     background-color: #025179;
 }
 .menu-holder ul li .submenu li a {
     display: inline;
     margin: 0 0px 0 0px;
     padding: 0px 10px 0px 10px;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holder ul li .submenu li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li .submenu li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li .submenu:hover {
     display: block;
 }
 .menu-holder ul li .submenu:hover .test {
     display: block;
     background-color: #025179;
 }
 .menu-wrapper .menu-holder ul li:first-of-type {
     border-left: none;
 }

Answers


Easy: http://jsfiddle.net/YKEkB/2/

You have to change it to this (delete the a):

 .menu-holder ul li:hover{
   display: block;
   background-color: #025179;
   }

Now you will have to adjust it so it's centered vertically. Note that you should keep 0px between the menu item and the submenu.

Many more things.

You can use the pseudo element :last-child to add the dotted line in the last item (see fiddle 3):

 .menu-holder ul li:last-child {
   border-right: 1px dotted white;
   }

If I'm right, you only wanted to round the last element in the drop down menu and the second corner of the first one:

 .menu-holder ul li ul li:first-of-type {
   -webkit-border-radius: 0px 5px 0px 0px;
   border-radius: 0px 5px 0px 0px;
 }

 .menu-holder ul li .submenu li:last-of-type {
   -webkit-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
 }

You can (and should) access the submenues like this:

 .menu-holder ul li ul {

Instead of this:

.menu-holder ul li .submenu {

Cleaned and touched a couple of things more, and here is your code working. Tell me if you find any trouble. There's still room for improvement (readability and DRY to name some), but here it goes:

Final Demo


Need Your Help

Local storage android and phonegap

jquery android cordova

I was just trying to store a value and retrieve it in phonegap and jquery via mds applaud.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.