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

i building pure html/css menu horizontal submenu. problem when hovering on submenu background color hover of main-menu item gone.

is possible keep background color of main menu item when hovering on submenu?

here got far:

http://jsfiddle.net/ykekb/1/

as can see when hover on "this one" submenu. when in submenu background color of "this one" changes back.

is there solution pure html/css?

this 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 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 {      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 {      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;  } 

easy: http://jsfiddle.net/ykekb/2/

you have change (delete a):

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

now have adjust it's centered vertically. note should keep 0px between menu item , submenu.

many more things.

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

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

if i'm right, wanted round last element in drop down menu , second corner of 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 submenues this:

 .menu-holder ul li ul { 

instead of this:

.menu-holder ul li .submenu {

cleaned , touched couple of things more, , here code working. tell me if find trouble. there's still room improvement (readability , dry name some), here goes:

final demo