CSS——position-优快云博客

本文链接：https://blog.youkuaiyun.com/frederickhai/article/details/5958316

在网上找到的一个利用css实现的关联下拉列表，不懂CSS做前台开发真的是举步维艰，希望自己能够不断增加这方面的能力！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css menu</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> ul.menu { width:180px; cursor:hand; list-style-type:none; border:1px solid #cccccc; padding:0px; margin:0px; } ul.menu li { width:100%; display:block; position:relative; } ul.menu li a { background-color:#06829C; color:#ffffff; width:100%; display:block; font-size:9pt; padding:2px; padding-left:10px; } ul.menu li ul.menu { display:none; width:190px; position:absolute; z-index:1000; left:80%; top:-10px; } ul.menu li:hover > a { width:100%; background-color:#64ACF8; color:#ff0000; } ul.menu li:hover > ul.menu { display:block; } </style> </head> <body> <ul class="menu"> <li><a href="#" mce_href="#">Item 1</a></li> <li> <a href="#" mce_href="#">Menu Item ></a> <ul class="menu"> <li><a href="#" mce_href="#">item</a></li> <li> <a href="#" mce_href="#">item ></a> <ul class="menu"> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> </ul> </li> <li> <a href="#" mce_href="#">item ></a> <ul class="menu"> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> </ul> </li> <li> <a href="#" mce_href="#">item ></a> <ul class="menu"> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> <li><a href="#" mce_href="#">menu item</a></li> </ul> </li> </ul> </li> </ul> </body> </html>