Shulou(Shulou.com)06/01 Report--

This article mainly shows you "CSS how to achieve multi-level menu", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS how to achieve multi-level menu" this article.

This is a pretty cool feature that makes web pages look like desktop programs, such as window's start menu. The implementation principle is basically similar to that of pure CSS albums, but there are many things to pay attention to, so let's take it one step at a time.

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

Menu one

Menu two

Menu three

Menu four

The structure is very familiar, just change the place where the pictures were put into words. And I marked it on purpose. The next presentation layer code is very simple.

* {

Margin:0

Padding:0

}

.menu {

Font-size:12px

}

.menuli {/ * horizontal menu * /

Float:left

List-style:none

}

.menua {

Display:block

Position:relative

Height:32px

Width:100px

Line-height:32px

Background:#a9ea00

Color:#ff8040

Text-decoration:none

Text-align:center

}

.menua: hover {

Background:#369

Color:#fff

}

.menulispan {

Display:none

Position:absolute

Left:0

Top:32px

Width:200px

Height:150px

Background:#B9D6FF

}

.menua: hoverspan {

Display:block

}

There are two noteworthy points here. Let's start with the first one. The top of the submenu (span element) should keep its top within the scope of the an element, and if the containing block is a li element, the same is true. When the top value of span is greater than 32px, such as 40px, we cannot move the mouse over the span element. Out of the scope of a:hover, the span element is hidden again.

.menulispan {

Display:none

Position:absolute

Left:0

Top:40px;/* ★★ modifies here ★★ * /

Width:200px

Height:150px

Background:#B9D6FF

}

The second problem, which is specific to IE6, is that the submenu does not disappear after the corresponding containing block mouseout. Hover pseudo-classes are equivalent to moverover and moverout. We can identify one style, mouseout, when mouseover gives its descendant elements another. In other words, display cannot now be switched in IE6 (except for the img element). The solution is to use visibility instead of display.

Okay, now let's really do the second-level menu, delete all the CSS about span, and change the location of the original span in the structure layer to the following code:

Secondary menu _ 11

Secondary menu _ 12

We took a look at the various browsers and felt very tired. IE6 is perpendicular to the secondary menu item of Opera10, but we didn't clear the float. The secondary menu items of firefox3.5 and chrome and safari4 are distributed horizontally, but there seems to be an extra menu item on it. On the contrary, IE8 did the best this time. I didn't install IE7, so I always ignored it.

Let's restyle it, such as changing the inclusion block to the li element so that the secondary menu items are displayed vertically.

* {

Margin:0

Padding:0

}

.menu {

Font-size:12px

}

.menuli {/ * horizontal menu * /

Float:left

List-style:none

Position:relative;/* will include block moving li elements * /

}

.menua {

Display:block

/ * position:relative; found that it was put in the an element

Miserable in the standard browser.

The same as the bug encountered in chrome in the first run box of pure CSS album 3 * /

Height:32px

Width:100px

Line-height:32px

Background:#a9ea00

Color:#ff8040

Text-decoration:none

Text-align:center

}

.menua: hover {

Background:#369

Color:#fff

}

/ * New secondary menu section * /

.menuulul {

Visibility:hidden;/* is hidden at the beginning * /

Position:absolute

Left:0px

Top:32px

}

.menuula: hoverul {

Visibility:visible

}

.menuululli {

Clear:both;/* vertical display * /

Text-align:left

}

It is found that the secondary menu does not respond in firefox, safari and chrome and does not pop up (the CSS parts of these three browsers are seriously plagiarizing each other). Opera10 performed best, followed by IE8. However, all elements in standard browsers support hover pseudo-classes, unlike IE6, which requires an element with href. We rewrite part of the CSS code:

.menuulli: hoverul,/* is not IE6*/

.menuula: hoverul {/ * IE6*/

Visibility:visible

}

The secondary menu pops up, but the mysterious li element also appears. I can't eliminate this mysterious li element with the double floating contraction surrounding (shrink-wrapping) phenomenon. Refer to foreign code, by placing the entire submenu outside element a, and then using li:hover to control the style switch. So the structure layer is rewritten as follows:

Menu one

Secondary menu _ 11

Secondary menu _ 12

Menu two

Secondary menu _ 21

Secondary menu _ 22

/ / * slightly *

/ / * slightly *

These are all the contents of the article "how to implement Multi-level menus in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.