二级导航条

yuki呀认真写文档

于 2018-03-10 11:44:27 发布

阅读量201

点赞数

分类专栏：学习的小结文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_41816349/article/details/79506445

版权

学习的小结专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html> <html lang="en"> <head> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; float: left; } body{ font-size: 20px; } #nav li { background-color: orange; width: 120px; float: left; padding: 5px; } #nav li ul li{ background-color: aquamarine; font-size:12px; } #nav li{ display: block; float: left ; } #nav li ul { display: none; } #nav li:hover ul { display: block; position: absolute; text-align: center; left: auto; top: auto; } </style> <meta charset="UTF-8"> <title>仿猫扑</title> </head> <body> <ul id="nav"> <li > 首页 <ul> <li>公司介绍</li> <li>关于我们 <li>售后</li> </li></ul> <li >产品介绍 <ul> <li>电视机</li> <li>家庭影院</li> <li>电脑</li> <li>微波炉</li> </ul> </li> </ul> </body> </html>

利用css选择器实现