Pure CSS drop-down menu from Microsoft

Combined with the Javascript drop-down menu, I also wrote a lot about the pure CSS drop-down menu. However, when I saw this pure CSS drop-down menu on the Microsoft Expression web site, I still felt very appreciated. This should be the simplest and cleanest pure CSS drop-down menu.

Let's take a look at the effect (I implemented it again ):

The implementation method is as follows:

The first is the XHTML of the menu.Code:

 <  Ul  > <  Li  > <  A  Href  = "#"> Menu 1 </  A  > </ Li  > <  Li  > <  A  Href  = "#"> Menu 2 </  A  > <  Ul  > <  Li  > <  A  Href  = "#"> Sub-menu 1</  A  > </  Li  > <  Li  > <  A  Href  = "#"> Sub-Menu 2 </  A  > </  Li  > <  Li  > <  A Href  = "#"> Sub-menu 3 </  A  > </  Li  > </  Ul  > </  Li  > <  Li  > <  A  Href  = "#"> Menu 3 </ A  > </  Li  > <  Li  > <  A  Href  = "#"> Menu 4 </  A  > <  Ul  > <  Li  > <  A  Href = "#"> Sub-menu 1 </  A  > </  Li  > <  Li  > <  A  Href  = "#"> Sub-Menu 2 </  A  > </  Li  > <  Li > <  A  Href  = "#"> Sub-menu 3 </  A  > </  Li  > </  Ul  > </  Li  > <  Li  > <  A  Href  = "#"> Menu 5 </  A  > </  Li  > </  Ul  > 

 

Without setting any CSS classes, it is very clean (of course, considering the complexity of the actual application, I guess you can't really do nothing. Either put this code in a specific container or add an ID or class to the UL at the first layer.

Suppose this is in a new HTML document, so we do not have any CSS definition. The webpage display effect is as follows:

In our drop-down menu, we do not need to install internal patches or margins. Even if necessary, we need to reset the settings ourselves. Therefore, we must first add the first rule:

 
Ul{Margin:0px;Padding:0px;}
 

For cross-browser compatibility, both the outer margin and the inner patch must be set to 0, because some browsers use the outer margin by default, and some use the inner patch by default. After this setting, we can see that the indentation in front of the list items on the page is gone, and the solid and hollow list symbols are gone. Then set the second rule:

 
Ul Li{Float:Left;Display:Inline;Font:0.9em Arial, Helvetica, sans-serif;Height:30px;Width:100px;List-style:None;}
 

This enables the Li element that originally occupies one row to be displayed as an embedded (Inline) display, and the list-item element to be an inline element. All in all, it is to make Li do not share a single line and join each other in order to become a menu. After setting, the effect is as follows:

In this way, the prototype of the drop-down menu is obtained. Of course, the appearance is ugly and the drop-down function has not been implemented yet. It should be noted that it is best to set the height and width for the menu item, otherwise unexpected results may occur (depending on the width of the page or container ). To make the menu item look like a menu, we can continue to add rules:

  ul Li a  { color :  # fff ;  text-decoration :  none ;  line-height :  29px ;  width :  91px ;  margin :  0px ;  padding :  0px 0px 0px 8px ;  display :  block ;  border-Right :  Solid 1px # CCC ;  border-bottom :  Solid 1px # CCC ;  background : # 808080 ;}

This rule takes a long time. In terms of function, the background is separated from the single food room offline. By default, the underlined blue text is changed to white without underline. Effect after adding rules:

In terms of appearance, this is our final drop-down menu style. However, we need to modify the details, for example, to make the style of the sub-menu different from that of the first-level menu (of course, because the font is set to 0.9em, the text size is different, however, it is not enough. In Chinese, we may not be able to distinguish the size of the text, because the size of the common Chinese text is only 12px and 14px ), therefore, we modify the background color of the menu at once, and make the sub-menu smaller than the height of the first-level menu. Rules:

 
Ul Li ul Li{Height:25px;}Ul Li ul Li{Background:#666;Line-height:24px;}
 

There are two rules. The first one is to reduce the height of the sub-Menu list item from the previously set 30px to 25, and the second is to change the background of the sub-menu item to #666, in addition, the text line height is correspondingly reduced to 24 after the setting is complete (the height of the list item is-1, and the value of 1 minus is exactly 1 pixel of the top border). The effect is as follows:

When we move the mouse over a menu item, we need to make it different from other items (indicating that the current menu is active, the term is "highlighted ", so Let's define the mouse sliding style of the level-1 menu:

Ul Li A: hover{Background:#666;}
 

Note: the background color is the same as the background color of the sub-menu. Why? You can see the results:

The second menu item here is the style when the mouse slides over, which is consistent with the background color of the pop-up sub-menu. Now the style of the entire menu is set up, but this is only a static menu. What we want is a dynamic one. So the work is not completed yet. What is next? The level-2 menu is hidden by default. Do we need to write js to hide them? No! The style is as follows:

 
Ul Li ul{Visibility:Hidden;}
 

In this way, the sub-menu is not displayed like "display: none". It is still in that position, and the structure of the document is not changed, but it is not visible, the link in the drop-down menu cannot be clicked.

The last rule displays the drop-down menu when you move the mouse over a drop-down. Of course, what we actually set is: if the parent element (level-1 menu item) of a drop-down menu is slide by the mouse, the drop-down menu can be seen:

Ul Li: hover ul{Visibility:Visible;}
 

In this way, the entire set drop-down menu is created. Of course, you can further modify this menu. For example, we should make the items in the sub-Menu also change color when the mouse slides over:

 
Ul Li ul Li A: hover{Background:#333;}
 

Final Effect

 

 

 

 

Note: This drop-down menu is consistent in the appearance and behavior of mainstream browsers (except for versions earlier than IE6. Excellent compatibility. Why is IE6 not supported? Because IE8 has come out, should we discard IE6, which brings infinite pain to web designers?

If the compatibility of IE6 is very important to your site, you can refer to this diskArticle: Http://wukangrui.com/2009/06/22/whatever-hover-pseudo do-class-without-javascript.html.

Reference: http://www.microsoft.com/china/expression/newsletter/2008-11/article05.aspx

This is the first self-knife blog in this article, and the blog Park is updated synchronously. If you need to reprint the data, please indicate the author and the source.