在網上找到的一個利用css實現的關聯下拉式清單，不懂CSS做前台開發真的是舉步維艱，希望自己能夠不斷增加這方面的能力！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>css menu</title><br /> <mce:style type="text/css"><!--<br /> ul.menu<br /> {<br /> width:180px;<br /> cursor:hand;<br /> list-style-type:none;<br /> border:1px solid #cccccc;<br /> padding:0px;<br /> margin:0px;</p><p> }</p><p> ul.menu li<br /> {<br /> width:100%;<br />display:block;<br />position:relative;<br /> }</p><p> ul.menu li a<br /> {</p><p> background-color:#06829C;<br /> color:#ffffff;<br /> width:100%;<br /> display:block;<br /> font-size:9pt;<br /> padding:2px;<br />padding-left:10px;<br /> }</p><p> ul.menu li ul.menu<br /> {<br /> display:none;<br /> width:190px;<br /> position:absolute;<br /> z-index:1000;<br /> left:80%;<br /> top:-10px;<br /> }</p><p> ul.menu li:hover > a<br /> {<br /> width:100%;<br /> background-color:#64ACF8;<br /> color:#ff0000;<br /> }</p><p> ul.menu li:hover > ul.menu<br /> {<br /> display:block;<br /> }</p><p>--></mce:style><style type="text/css" mce_bogus="1"> ul.menu<br /> {<br /> width:180px;<br /> cursor:hand;<br /> list-style-type:none;<br /> border:1px solid #cccccc;<br /> padding:0px;<br /> margin:0px;</p><p> }</p><p> ul.menu li<br /> {<br /> width:100%;<br />display:block;<br />position:relative;<br /> }</p><p> ul.menu li a<br /> {</p><p> background-color:#06829C;<br /> color:#ffffff;<br /> width:100%;<br /> display:block;<br /> font-size:9pt;<br /> padding:2px;<br />padding-left:10px;<br /> }</p><p> ul.menu li ul.menu<br /> {<br /> display:none;<br /> width:190px;<br /> position:absolute;<br /> z-index:1000;<br /> left:80%;<br /> top:-10px;<br /> }</p><p> ul.menu li:hover > a<br /> {<br /> width:100%;<br /> background-color:#64ACF8;<br /> color:#ff0000;<br /> }</p><p> ul.menu li:hover > ul.menu<br /> {<br /> display:block;<br /> }<br /> </style><br /></head></p><p><body><br /> <ul class="menu"><br /> <li><a href="#" mce_href="#">Item 1</a></li></p><p> <li><br /> <a href="#" mce_href="#">Menu Item ></a></p><p> <ul class="menu"><br /> <li><a href="#" mce_href="#">item</a></li></p><p> <li><br /> <a href="#" mce_href="#">item ></a></p><p> <ul class="menu"><br /> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li><br /> </ul><br /> </li></p><p> <li><br /> <a href="#" mce_href="#">item ></a></p><p> <ul class="menu"><br /> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li><br /> </ul><br /> </li></p><p> <li><br /> <a href="#" mce_href="#">item ></a></p><p> <ul class="menu"><br /> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li></p><p> <li><a href="#" mce_href="#">menu item</a></li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> </ul><br /></body><br /></html>
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
