Home > Developer > Web Develop
Note the point:
1. Setting the width and height of the A tag is not useful, and can be set in two ways
(1). Display:block;
(2). Float:left;
2. Set the drop-down menu, and most importantly
(1). Use positioning Position:absolute; define the UL tag under the Li tag, hide the 2-level column, Display:none;
(2). The floating effect of the Li list is canceled, Float:none;
(3). Then define the mouse slide over the effect of the Li tag definition, li:hover ul {display:block};
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Drop-down menu</title> <styletype= "Text/css">Body ul{margin:0 Auto;padding:0; }ul Li{List-style:None; }a{text-decoration:None; }. Nav{margin:40px 0 0 450px;Border:1px solid #ccc;float: Left; }. Nav ul Li{float: Left; }. Nav ul Li a{width:100px;Height:30px;Border:1px solid Black;Background-color:#49D82D;Color:#ffffff;Display:Block;text-align:Center;Line-height:30px; }. Nav ul li A:hover{background:#45B0D1; }. Nav UL Li ul{position:Absolute;Display:None; }. Nav ul Li ul li{float:None; }. Nav ul Li ul li a{Border-right:None;Border-top:1px dotted #ccc; }. Nav UL Li:hover ul{Display:Block; } </style></Head><Body> <Divclass= "NAV"> <ul> <Li><ahref="">Section 1</a> <ul> <Li><ahref="">Level two column 1</a></Li> <Li><ahref="">Level two column 2</a></Li> <Li><ahref="">Level two column 3</a></Li> <Li><ahref="">Level two column 4</a></Li> </ul> </Li> <Li><ahref="">Section 2</a></Li> <Li><ahref="">Section 3</a></Li> <Li><ahref="">Section 4</a></Li> </ul> </Div></Body></HTML>
11.CSS definition drop-down menu
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
