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


Comments

Post a Comment

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

i mean whether gcc can insert source code version infor elf binary section or similar. not want change source file, add info gcc option in makefile. you can emit version info text file, turn text file object file statically link executable. the first step simple have write code: script or write version info in format plain text file. write makefile rule produce version.o version.txt, using objcopy . you'll have object file 2 useful symbols defined in it: beginning , end of textual version info. add generated object executable, , you'll able access version 2 ways: running strings on binary, or writing code in application print version string (you'll need declare start , end symbols variables in header file).
Read more

android - send complex objects as post php java -

is possible send contact numbers via post php class inside eclipse ? or post limited primitive types , have find work arounds send them string ? i propose: send them json in post request, befor start, have @ gson project , keep in mind set content application -> json. luck
Read more

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -

i love facebook dashboard: pue & wue. beautifull can point out if there open source or commercial product offer similar style? here link https://www.facebook.com/forestcitydatacenter?sk=app_288655784601722&app_data so read through 29,888 lines of javascript ya.. biggest js file i've ever seen. looks make graph using variety of tools, including tween.js . it'd fascinating chat whoever made it. code wheel graph object starts @ line 27,266 text var graphcomponent = class.extend({ . can find source @ https://www.fbpuewue.com/assets/application-3a3af20f7fa3591229c79442ae3d1c26.js . sorry if dissapoints it's not awesome plugin can use :/ share pain. let me know if have questions :)
Read more