纯css样式下滑二级导航菜单

原创 新起点博客  2018-12-10 20:38 
【上云必备】上云仅?102/年

今天河南SEO给大家分享一个简单的下滑菜单,纯手写CSS样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
a{text-decoration: none;color:#fff;}
ul li{list-style:none;}
.newnav{}
.newnav ul{}
.newnav ul li{float:left;background: red;width:100px;line-height: 50px;text-align: center;}

.newnav ul li ul li{background:#333;margin-left: -40px;}
#newnavul li{float:left;width:130px;text-align: center; line-height: 50px; display:none;}
#newnavul li a{display: block;}
.newnav ul li:hover #newnavul li{display: block;}
#newnavul li a:hover{background: #fff;color:blue;}
</style>

</head>

<body>
<div class="newnav">
<ul>
<li><a href="">网站首页</a></li>
<li><a href="">关于我们</a></li>
<li>
<a href="">课程介绍</a>
<ul id="newnavul">
<li><a href="">介绍1</a></li>
<li><a href="">介绍2</a></li>
<li><a href="">介绍3</a></li>
<li><a href="">介绍4</a></li>
</ul>
</li>
<li><a href="">网站首页</a></li>
<li><a href="">新闻中心</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>

本文地址:https://www.henenseo.com/archives/913
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情