CSS multi-level menu implementation code

This is a pretty cool feature that makes web pages look like desktop programs, such as the Windows start menu. The implementation principle is similar to that of pure CSS photo album, but there are more things to pay attention to. Let's go through it step by step.

Let’s start with a very simple first-level menu with hover effects.

<ul id="menu">
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      Menu 1<!--Small Image--><span><!--Large Image--></span>
    </a>
  </li>
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      Menu 2<!--Small Picture--><span><!--Large Picture--></span>
    </a>
  </li>
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      Menu 3<!--Small Picture--><span><!--Large Picture--></span>
    </a>
  </li>
  <li class="last">
    <a href="//www.jb51.net/rubylouvre/">
      Menu 4<!--Small Image--><span><!--Large Image--></span>
    </a>
  </li>
</ul>

The structure looks familiar, right? It's just that the original place where the pictures were placed is replaced with text. I also marked it specially. The presentation layer code that follows is very simple.

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*Horizontal menu*/
  float:left;
  list-style:none;
}
.menu a {
  display:block;
  position:relative;
  height:32px;
  width:100px;
  line-height:32px;
  background:#a9ea00;
  color:#ff8040;
  text-decoration:none;
  text-align:center;
}
.menu a:hover {
  background:#369;
  color:#fff;
}
.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:32px;
  width:200px;
  height:150px;
  background:#B9D6FF;
}
.menu a:hover span {
  display:block;
}

There are two things worth noting here. Let’s talk about the first one first. The top of the submenu (span element) should keep its top within the range of the a element. If the containing block is a li element, the same applies. When the top value of span is greater than 32px, such as 40px, we cannot move the mouse to the span element. Because it leaves the scope of a:hover, the span element is hidden again.

.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:40px;/*★★Modify here★★*/
  width:200px;
  height:150px;
  background:#B9D6FF;
}

The second problem is specific to IE6, which is that the submenu does not disappear after the corresponding containing block is moused out. The hover pseudo-class is equivalent to moverover and moverout. We can assign one style to its descendant elements when the mouse is over, and another style when the mouse is out. In other words, display cannot be switched in IE6 now (except for img elements). The solution is to use visibility instead of display.

OK, now we actually make a secondary menu. Delete all the CSS related to span and replace the original span position in the structure layer with the following code:

<ul>
  <li><a href="//www.jb51.net/rubylouvre/">Secondary Menu_11</a></li>
  <li><a href="//www.jb51.net/rubylouvre/">Secondary Menu_12</a></li>
</ul>

We checked various browsers and found it very weak. The secondary menu items of IE6 and Opera10 are vertical, but we didn’t clear the floating? The secondary menu items of firefox3.5, chrome and safari4 are distributed horizontally, but there seems to be an extra menu item on top...IE8 students performed the best this time. I don't have IE7 installed, so I always ignore it.

Let's reset the style, such as changing the containing block to the li element, so that the secondary menu items are displayed vertically.

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*Horizontal menu*/
  float:left;
  list-style:none;
  position:relative;/*Move the containing block to the li element*/
}
.menu a {
  display:block;
  /*position:relative; found in the a element,
  It's terrible in a standard browser.
  Same bug as the first run box of Pure CSS Album 3 encountered in Chrome*/
  height:32px;
  width:100px;
  line-height:32px;
  background:#a9ea00;
  color:#ff8040;
  text-decoration:none;
  text-align:center;
}
.menu a:hover {
  background:#369;
  color:#fff;
}
/*Newly added secondary menu section*/
.menu ul ul {
  visibility:hidden;/*Hidden at the beginning*/
  position:absolute;
  left:0px;
  top:32px;
}
.menu ul a:hover ul{
  visibility:visible;
}
.menu ul ul li {
  clear:both;/*vertical display*/
  text-align:left;
}

I found that the secondary menu did not respond in Firefox, Safari and Chrome and did not pop up (the CSS parts of these three browsers were heavily copied from each other). Opera10 performed the best, followed by IE8. However, all elements of standard browsers support the hover pseudo-class, unlike IE6, which requires an a element with an href. We rewrite some CSS code:

.menu ul li:hover ul,/*non-IE6*/
.menu ul a:hover ul{/*IE6*/
  visibility:visible;
}

The secondary menu pops up, but the mysterious li element also appears. I tried double floating and shrink-wrapping but couldn't get rid of the mysterious li element. Referring to foreign codes, the method is to put the entire submenu outside the a element, and then use li:hover to control the style switching. So the structure layer is rewritten as follows:

<div class="menu">
  <ul>
    <li>
      <a href="//www.jb51.net/rubylouvre/">Menu 1</a>
      <ul>
        <li><a href="//www.jb51.net/rubylouvre/">Secondary Menu_11</a></li>
        <li><a href="//www.jb51.net/rubylouvre/">Secondary Menu_12</a></li>
      </ul>
    </li>
    <li>
      <a href="//www.jb51.net/rubylouvre/">Menu 2</a>
      <ul>
        <li><a href="//www.jb51.net/rubylouvre/">Secondary Menu_21</a></li>
        <li><a href="//www.jb51.net/rubylouvre/">Secondary Menu_22</a></li>
      </ul>
    </li>
    <li>
    //***************slightly************
    </li>
    <li>
    //***************slightly************
    </li>
  </ul>
</div>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.