Home > Developer > Web Develop
Pure CSS implementation of the two-level drop-down menu effect code example:
Two-level drop-down is one of the most commonly used effects, the current effect of this general yo combined with JS implementation, this chapter introduces a pure CSS implementation of the two-level drop-down menu effect, hoping to bring some help to the needs of friends, but this code also has a little browser compatibility problem, that is in IE6 incompatible.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">ul{padding:0;Font:15px "Microsoft Ya Hei";}. Item{width:100px;padding:0 5px;Border:Solid 1px #eee;Display:Block;float: Left}. Item UL Li{width:100px;padding:6px 0;text-align:Center;Display:None;cursor:default}. Item ul. F,. Item:hover ul Li{Display:Block}. Item UL li:hover{background:#f0f0f0}. Item:hover ul Li{Border-bottom:Solid 1px #eee;}. Item:hover ul. L,. Item ul. l{Border-bottom:0}</style></Head><Body><ulclass= "Menu"> <Liclass= "Item"> <ul> <Liclass= "F">File</Li> <Li>Open it</Li> <Li>Shut down</Li> <Li>Save</Li> <Li>Print</Li> <Liclass= "L">Exit</Li> </ul> </Li> <Liclass= "Item"> <ul> <Liclass= "F">Edit</Li> <Li>Revoke</Li> <Li>Redo</Li> <Li>Paste</Li> <Li>Shear</Li> <Liclass= "L">Select All</Li> </ul> </Li> <Liclass= "Item"> <ul> <Liclass= "F">Help</Li> <Li>Help documentation</Li> <Liclass= "L">About</Li> </ul> </Li></ul></Body></HTML>
The above code implements the drop-down menu effect, but the IE6 browser is incompatible, because IE6 does not support Li:hover, which supports hyperlinks: hover.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=10894
For more information, refer to: http://www.softwhy.com/divcss/
Pure CSS implementation of level two drop-down menu effect code instance
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
