Then write a menu sidebar for the production, look first
The source code is as follows
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css"> * {margin:0;padding:0; }Body{font-family:"Microsoft Jas Black";font-size:14px; }a{text-decoration:None; }. Sliderbar{position:fixed; Left:20px;Top:35%; }. Sliderbar. Ftname{position:relative; }. Sliderbar DL DD{position:relative;width:80px;Height:80px;Background-color:#646577;Border-bottom:1px solid #999;text-align:Center;background-repeat:no-repeat;background-position:Center 20%;cursor:Pointer; }. Sliderbar DD span{Color:#fff;width:80px;Height:80px;Line-height:80px;Display:Block; }. Sliderinfo{position:Absolute; Left:90px;Top:0;width:250px;Background-color:#646577;padding:0 10px;Color:#FFFFFF;text-align: Left;Display:None; }. Ftname:hover > A > Span{Background-color:Coral; }. ftname:hover >. sliderinfo{Display:Block; } </style> </Head> <Body> <Divclass= "Sliderbar"> <DL> <DDclass= "Ftname"> <ahref="#"> <span>Parcel Search</span> </a> <Divclass= "Sliderinfo"> <P>Bulk query cross-border parcel logistics delivery information, support postal, DHL, UPS, EMS, FedEx and other services</P> </Div> </DD> <DDclass= "Ftname"> <ahref="#"> <span>Import Personal<BR>Quota Enquiry</span> </a> <Divclass= "Sliderinfo"> <P>Enquiry through import cross-border e-commerce channel purchase, used amount</P> </Div> </DD> <DDclass= "Ftname"> <ahref="#"> <span>Quick Mail Online</span> </a> <Divclass= "Sliderinfo"> <P>Express Mail Online Logistics comprehensive service platform for e-commerce and foreign trade enterprises to provide logistics, customs, financial and other services</P> </Div> </DD> </DL> </Div> </Body></HTML>
[Liu Yang java]_css menu sidebar creation