<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> <style> *{ margin: 0px; padding: 0px; } .clear:after{ content: "\200B"; display: block; clear: both; } div{ width: 1000px; height: 40px; background: #666666; margin: 200px auto; border-radius: 5px; } li{ list-style: none; } .u1{ display: inline-block; float: left; } .u2{ float: left; display: inline-block; } .u3{ float: left; display: inline-block; } .u4{ /*float: left;*/ display: inline-block; } li{ width: 100px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; color: white; } .title1:hover{ background: red; } .child1{ background: #666666; display: none; } .u1:hover .child1{ display: block; } .title2:hover{ background: red; } .child2{ background: #666666; display: none; } .u2:hover .child2{ display: block; } .title3:hover{ background: red; } .child3{ background: #666666; display: none; } .u3:hover .child3{ display: block; } .title4:hover{ background: red; } .child4{ background: #666666; display: none; } .u4:hover .child4{ display: block; } </style> </head> <body> <div class="clear"> <ul class="u1"> <li class="title1">首页</li> <li> <ul class="child1"> <li>公司简介</li> <li>公司文化</li> <li>关于我们</li> <li>联系我们</li> </ul> </li> </ul> <ul class="u2"> <li class="title2">项目</li> <li> <ul class="child2"> <li>安卓</li> <li>苹果</li> <li>测试</li> <li>Php</li> </ul> </li> </ul> <ul class="u3"> <li class="title3">项目</li> <li> <ul class="child3"> <li>安卓</li> <li>苹果</li> <li>测试</li> <li>Php</li> </ul> </li> </ul> <ul class="u4"> <li class="title4">项目</li> <li> <ul class="child4"> <li>安卓</li> <li>苹果</li> <li>测试</li> <li>Php</li> </ul> </li> </ul> </div> </body> </html>
html5/Css3 导航样式
最新推荐文章于 2022-01-18 18:07:05 发布