This time, the cascading menu for the project uses the pure CSS method. Hook, you can do it with CSS.
Some predecessors have already completed such an instance. I thought I could do it smoothly, but I did not expect to hit the wall everywhere. So I will record some of my experiences as follows for your reference.
Don't talk nonsense. Let's get started!
In addition to IE6, this strong child, other browsers are easy to conquer.
There are two key points to completing the instance:
However, IE6 is complicated. After the lessons learned, the key four points are summarized.:
1. principle: IE6 only supports <A> label: hover pseudo class. However, if tag a is embedded in tag a, tag a does not take effect, therefore, you must add a <Table> layer between them;
<! -[If IE 6]> <a href = "# Nogo"> <Table> <tr> <TD> <! [Endif]->
The content part can contain <A> tags
<! -[If IE 6]> </TD> </tr> </table> </a> <! [Endif]->
2. key style name: This is used to name the label of the hover effect. If the name of the style is the same as that of <li> (Li: hover produces the effect in non-IE6 ), there will be no additional style WritingCodeNot only saves code overhead, but also makes it more maintainable (this is the key to saving time and effort)
<Li class = "Li">
<! -[If IE 6]> <a class = "Li" href = "# Nogo"> <Table> <tr> <TD>
<! [Endif]->
The content part can contain <A> tags
<! -[If IE 6]> </TD> </tr> </table> </a> <! [Endif]->
</LI>
3. Use of visibility: If you use display, the optiongroup shown last time in onmouseout still does not disappear.
. C_subnav. Li: hover ul {visibility: visible ;}
4. Table settings: [Tearful ing] the table must remember width: 100%; Ah, remember.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
