I got a level-2 horizontal menu for someone yesterday. After the test, we habitually tested IE6 and found that the width is not adaptive.
Solution: float the target to make it adaptive.
| # Menu a {float: left ;} |
<! 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 "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = GBK "/> <title> auto-fit-width-horizontal-css-menu-LIEHUO. NET </title> <style type = "text/css"> * {margin: 0; padding: 0 ;}# menu {height: 4em; background: # 07a; position: relative ;}# menu ul {width: inherit; height: 2em; background: # fff ;}# menu li {float: left; line-height: 2em; list-style: none;} # menu a {float: left; margin: 0 5px; padding: 0 1em; height: 100%; background: # 0af; text-align: center; color: # eee; text-decoration: none;}/* left floating to make IE6 width adaptive */# menu li: hover a, # menu li. hover a {background: # 07a;} # menu li: hover ul, # menu li. hover ul {display: block;} # menu li ul {display: none; position: absolute; top: 2em; clear: both;} # menu li ul a {margin: 0; background: # 07a; font-size :. 8em} </style>
Tip: the code can be modified before running!
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
