Form 2-drop-down menu

 

 

 

/* Form 2 */form. BS-docs-example {position: relative; width: 600px; margin: 15px auto; padding: 39px 19px 14px; Background-color: White; Border: 1px solid # DDD; -WebKit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px ;}

Form. BS-docs-Example: After {content: "example"; position: absolute; top:-1px; left:-1px; padding: 3px 7px; font-size: 12px; font-weight: bold; Background-color: # f5f5f5; Border: 1px solid # DDD; color: #9da0a4;-WebKit-border-radius: 4px 0 4px 0; -Moz-border-radius: 4px 0 4px 0; border-radius: 4px 0 4px 0 ;}

 

Div. input-prepend {position: relative; display: inline-block; margin: 10px; font-size: 0; white-space: nowrap; Vertical-align: middle; box-sizing: border-box;} Div. BTN-Group {position: relative; display: inline-block; font-size: 0; white-space: nowrap; Vertical-align: middle;} button. dropdown-Toggle {display: inline-block; padding: 4px 12px; margin-bottom: 0; margin-Right:-1px; Height: 30px; line-Height: 20px; Border: 1px solid # CCC; border-radius: 4px 0 0 4px; font-size: 14px; color: #333; text-align: center; text-Shadow: 0 1px 1px rgba (255,255,255, 0.75); cursor: pointer; Background-color: # e5e5e5;

}

Span. caret {display: inline-block; content: ""; width: 0; Height: 0; margin-top: 8px; Vertical-align: Top; border-top: 4px solid black; border-Right: 4px solid transparent; border-left: 4px solid transparent ;}

Input. span2 {display: inline-block; padding: 4px 12px; Height: 20px; line-Height: 20px; Vertical-align: Top ;}

. Clear {clear: Both ;}

Ul. dropdown-menu Li {heiht: 20px; line-Height: 20px ;}

Ul. dropdown-menu Li a {display: block; padding: 3px 20px; clear: Both; font-weight: normal; line-Height: 20px; color: #333; white-space: nowrap ;}

Ul. dropdown-menu {display: block; position: absolute; top: 100%; left: 0; font-size: 14px; float: Left; Min-width: 160px; padding: 5px 0; margin: 2px 0 0; List-style: none; Background-color: White; Border: 1px solid # CCC;-WebKit-border-radius: 6px; -Moz-border-radius: 6px; border-radius: 6px;-WebKit-box-Shadow: 0 5px 10px rgba (0, 0, 0, 0.2 ); -Moz-box-Shadow: 0 5px 10px rgba (0.2, 0, 0.2); box-Shadow: 0 5px 10px rgba (0, 0, 0 ); -WebKit-Background-clip: padding-box;-moz-Background-clip: padding; Background-clip: padding-box ;}

Ul. dropdown-menu Li. divider {Height: 2px; margin: 9px 1px; overflow: hidden; Background-color: # e5e5e5; border-bottom: 1px solid # FFF ;}

 

 

<! -- Form 2 -->
<Form class = "BS-docs-Example">
<Div class = "input-prepend">
<Div class = "BTN-group">
<Button class = "dropdown-toggle">
Action
<SPAN class = "caret"> </span>
</Button>
<Ul class = "dropdown-menu">
<Li> <a href = "#"> China </a> </LI>
<Li> <a href = "#"> UK </a> </LI>
<Li> <a href = "#"> France </a> </LI>
<Li class = "divider"> </LI>
<Li> <a href = "#"> Canada </a> </LI>
<Div class = "clear"> </div>
</Ul>
</Div>
<Input type = "text" class = "span2"/>

</Div>

</Form>

 

 

 

*

Bugs and solutions for hiding sub-elements in hover pseudo-class display in IE6

 

HTML code and CSS code:

This code can be perfectly presented in other browsers except IE6, but there is a problem in IE6.

Bug1: The child element is not displayed.

In IE6, when the mouse hovers to element a, Element B does not appear as expected.

Most of the bugs reported by week, IE6/7 can be solved by starting with haslayout, so we can imagine whether haslayout can be triggered. Since the width and height of Elements A and B have already triggered haslayout, can they be triggered on the pseudo class of?

Try to add the following code:

1

.a:hover{

2

zoom:1;

3

}

Check IE6 again. The problem has been solved. The B element can be displayed normally during hover.

Bug1 solution:

Add the zoom: 1 attribute to the hover pseudo class to trigger the haslayout of the pseudo class.

The current CSS code is as follows:

 

However, when we move the mouse away from element a, we find that all Element B in IE6 does not disappear.

 

Bug2: does not disappear after the sub-element hover

This bug is a bit strange. It is estimated that an error occurs during rendering. IE6 often has this inexplicable problem. As elements A and B and the pseudo classes a trigger haslayout, currently, the element that can trigger haslayout does not exist. Therefore, this scheme for triggering haslayout can be abandoned temporarily.

Now that the problem lies in display, can we solve this bug without changing the display attribute of Element B?

Then, we try to use another method to display and hide Element B without changing the display attribute.

Solution 1:

Before hover, add overflow: hidden to element A. After hover, change the overflow value to visible and remove the modification to the display attribute of Element B. The Code is as follows:

 

The problem was solved, and the effect in IE6 was perfect.

And so on...

Can there be another solution if the value of overflow cannot be changed in some cases?

In addition to display, the hidden CSS attribute of element display has another attribute: visibility. Can this attribute be used to solve the problem?

Solution 2:

Add the visibility attribute to Element B of IE6. The Code is as follows:

 

 

IE6 passed the test. It seems that this solution is also feasible. For details about the differences between the display and visibility attributes, refer to Google. We will not discuss them here.

Of course, I believe some people have come up with another method to display and hide Element B by changing the left/top/right/bottom value of Element B, take the left value as an example. The Code is as follows:

In this way, the effects of elements can be displayed and hidden in IE6. There are many solutions, and there may be other different solutions. You are welcome to discuss them together!

Bug2 solution:

1. Hide and display sub-elements by changing the overflow value of hover pseudo-class elements;

2. Hide sub-elements by using the visibility attribute;

3. Change the left/top/right/bottom values of sub-elements to display and hide the elements.

 

Form 2-drop-down menu