Example code explanation of CSS multi-level menu

The content of this article is about the example code explanation of CSS multi-level menu. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This is a pretty cool feature that makes web pages look like desktop programs, such as the window's start menu. The implementation principle is basically the same as that of a pure CSS photo album, but there are more things to pay attention to, so let’s do it step by step.

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

<ul id="menu">
  <li>
    <a href="http://www.php.cn/">
      菜单一<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单二<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单三<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li class="last">
    <a href="http://www.php.cn/">
      菜单四<!--小图--><span><!--大图--></span>
    </a>
  </li>
</ul>

The structure is very familiar, it just replaces the original place for pictures with text. I also marked it out specially. The next presentation layer code is very simple.

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*水平菜单*/
  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 be able to make the top stay within the scope 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 has left the scope of a:hover, the span element is hidden again.

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

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

Okay, now we actually make the secondary menu, delete all the CSS related to span, and change the position of the original span in the structure layer to the following code:

<ul>
  <li><a href="http://www.php.cn/">二级菜单_11</a></li>
  <li><a href="http://www.php.cn/">二级菜单_12</a></li>
</ul>

We are in each tour Looking at the device, I feel very weak. The secondary menu items of IE6 and Opera10 are vertical, but we have not cleared the float? The secondary menu items of firefox3.5, chrome and safari4 are distributed horizontally, but there seems to be an extra menu item above... IE8 students performed 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 can be displayed vertically.

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*水平菜单*/
  float:left;
  list-style:none;
  position:relative;/*把包含块移动li元素*/
}
.menu a {
  display:block;
  /*position:relative;发现放在a元素中，
  在标准游览器中惨不忍睹，
  和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
  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 ul ul {
  visibility:hidden;/*开始时是隐藏的*/
  position:absolute;
  left:0px;
  top:32px;
}
.menu ul a:hover ul{
  visibility:visible;
}
.menu ul ul li {
  clear:both;/*垂直显示*/
  text-align:left;
}

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

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

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

<div class="menu">
  <ul>
    <li>
      <a href="http://www.php.cn/">菜单一 </a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_11</a></li>
        <li><a href="http://www.php.cn/">二级菜单_12</a></li>
      </ul>
    </li>
    <li>
      <a href="http://www.php.cn/">菜单二</a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_21</a></li>
        <li><a href="http://www.php.cn/">二级菜单_22</a></li>
      </ul>
    </li>
    <li>
    //***************略************
    </li>
    <li>
    //***************略************
    </li>
  </ul>
</div>

The above is the detailed content of Example code explanation of CSS multi-level menu. For more information, please follow other related articles on the PHP Chinese website!