赞
踩
2022年3月17号
今天学习了网页前端的二级菜单栏的编写过程,当中还是遇到了很多问题:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0%; padding: 0%; } ul{ list-style: none; } .box{ width: 300px; margin: 0,auto; } .box .item{ float:left; width: 148px; text-align: center; border: 1px solid blue; background-color: blue; line-height: 40px; color:white; } .item:hover { background-color: lightblue; } .item ul{ background-color: white; color:black; display: none; } .item:hover ul{ display: block; } .item li:hover { color:blue; } </style> </head> <body> <ul class="box"> <li class="item">视频教程 <ul> <li>全部视频教程</li> <li>HTML5视频教程</li> <li>java视频教程</li> <li>python视频教程</li> </ul> </li> <li class="item">认证考试 <ul> <li>PMP</li> <li>红帽</li> </ul> </li> </ul> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。