Ultimate Micox Menu drop-down CSS - 4 levels

Hi, now a code to be easy make your css drop down menu.

Long time ago i'm finding a perfetc css menu drop down code.
I want a dropdown css menu easy to copy/paste, fast and no difficult configurations.
Just set width, color, bg and ready. Working in FF, IE6/7 an Opera.

Yesterday i post the final part that my code need (activating hover in IE6).
See the online example (and source code) of Ultimate Micox Menu Drop Down CSS - 4 levels.

The codes:
First, make your old UL e LI menu.

<ul>
 <li>class='menu-hv'</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>
  <ul style='background-color: red; '>
   <li>31</li>
   <li><a href='#'>32</a></li>
   <li>33</li>
  </ul>
 </li>
 <li><a href='#'>4...</a>
  <ul>
   <li>41</li>
   <li><a href='#'>42</a></li>
   <li><a href='#'>43...</a>
    <ul  style='background-color: blue'>
     <li>431</li>
     <li><a href='#'>432...</a>
      <ul  style='background-color: gray'>
       <li>4321</li>
       <li><a href='#'>4322</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li>44</li>
  </ul>
 </li>
</ul>

Second, put the class 'menu-hv' in your UL (or in parent div of UL) to activate horizontal-vertical menu. To vertical-vertical menu the class name is 'menu-vv'.

<ul class='menu-hv'>

Finally, put the code of Ultimate Micox Menu drop-down CSS (UMMDDCSS heheheh) in your CSS code or file. You can edit font, color, width, etc of menu itens in indicated place of my code.

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) 4 levels
  by Micox - elmicoxcodes.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/    
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
 .menu-hv * ,    .menu-vv * { margin: 0; padding: 0 ; list-style: none}
 .menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
 .menu-hv a ,    .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
 .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
 .menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
 .menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
 .menu-hv li li:hover ul,  .menu-vv li li:hover ul,
 .menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
 .menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
 .menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
 .menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
 .menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
 /* horizontal-vertical */
 .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
 .menu-hv li { float: left; }  
 .menu-hv li ul li { float: none; }
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 /* vertical-vertical */
 .menu-vv { float: left; } 
 .menu-vv li ul { left: 100%; top: 0; }
 /* ****************************************
   Define width, color, bg, etc ABOVE or clear this line if will define in other place
 */
 .menu-hv li { width: 100px; background-color: yellow }
 .menu-vv li { width: 100px; background-color: yellow }
 .menu-hv li a:hover { background-color: cyan }
 .menu-vv li a:hover { background-color: cyan }

 
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
   http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html */
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Ready! Comments please.

19 comments:

  1. Hi,

    It's looking very interesting! I will try it. If I need a new level in my menu, could you please explain what is needed?

    I might use it together with a XSLT menu, so I need to be able to understand how the stucture is.

    Thanks!

    /Sten Hougaard

    ReplyDelete
  2. Hi sten,

    Sorry about the long delay.

    To make a menu with many levels you need a ul-li structure like in example.

    The father menu should be in a ul and the itens in li's inside this ul.
    New levels should be ul's inside the li's of father. Like the example.

    Sorry my poor english.
    Thanks.

    ReplyDelete
  3. Hi,

    Your English is (just as) fine as mine! ;-)

    The HTML part with including extra UL inside LI I understand. The CSS part is the (for me) tricky part :-)

    /Sten

    ReplyDelete
  4. Hi sten,

    To make a new level, you dont needs do nothing in your CSS! This is the bennefits of my code. It supports to 4 levels.

    You just need make a new ul inside a li to make a new level (and put the classname in ul father).

    Thanks.

    ReplyDelete
  5. Hello,

    First Thank You very much. I was looking for a menu like this for nearly a week. Now I'm very happy. Very good job :) I want to make a menu like in http://www.kawasaki.com/ your menu is nearly the same. But how can I insert arrows on active links and make the active menus same color. for example sub menus are green in the site. I will be very very happy if you can help me. THANKS AGAIN :D

    ReplyDelete
  6. Hi emre.

    You can change color of active menus in this line of css:

    .menu-hv li a:hover { background-color: cyan }

    To put arrows, use a background-image in this CSS selector.

    Learn about CSS.
    Thanks.

    ReplyDelete
  7. Hi El Micox,

    Thanks for reply :) I know a little CSS but I hope will learn more. I made the color change. But is it possible to make all selected items same color. For example how can I make Menu item (vertical menu) 4, 43, 432 and 4321 cyan at the same time so that the user can understand that he came from root 4 ?
    Thanks again :D

    ReplyDelete
  8. Hi, try this:

    .menu-hv li.hover, .menu-hv li:hover { background-color: cyan }
    .menu-vv li.hover, .menu-vv li:hover { background-color: cyan }

    ReplyDelete
  9. Thanks again El Micox. I tried it and it's working very well. Have a nice day :D

    ReplyDelete
  10. It was extremely interesting for me to read the article. Thank you for it. I like such topics and everything connected to this matter. I definitely want to read more soon.

    ReplyDelete
  11. It is certainly interesting for me to read that article. Thanx for it. I like such topics and anything that is connected to this matter. I would like to read more on that blog soon.

    ReplyDelete
  12. I inclination not agree on it. I regard as polite post. Especially the appellation attracted me to study the whole story.

    ReplyDelete
  13. great post. I would love to follow you on twitter. By the way, did you learn that some chinese hacker had hacked twitter yesterday again.

    ReplyDelete
  14. Amiable fill someone in on and this post helped me alot in my college assignement. Thanks you for your information.

    ReplyDelete
  15. Opulently I to but I dream the brief should prepare more info then it has.

    ReplyDelete
  16. Keep on posting such articles. I like to read articles like that. Just add more pics :)

    ReplyDelete
  17. Can you tell me how I can make the Father Menu items auto width? I have some shot and some long words for the top menu and would like them to auto scale so I dont have to have one menu width?
    THANKS!

    ReplyDelete
  18. Hi pack49, unfortunaly , in my menu script, it's not possible make auto width (because of Internet Explorer sucks). Sorry :(

    ReplyDelete