css三级菜单效果
一个简单实用的css三级菜单效果
doctype html>
<html>
<head><meta charset="utf-8"><title>css实现三级菜单title><style type="text/css">*{margin:0;padding:0}ul{list-style:none}a{text-decoration:none}body{font-size:16px}.nav{width:100%;height:40px;line-height:40px;background:#333}.container{width:1000px;margin:0px auto}.nav li{float:left;position:relative}.nav li a{float:left;width:100px;text-align:center;height:40px;color:#fff}.nav li ul{width:100%;background:#fff;position:absolute;left:0px;top:40px;display:none}.nav li li{float:none}.nav li li a{float:none;display:inline-block}.nav li li a{color:#333}.nav li ul li ul{left:100px;top:0px}.nav li:hover{background:red}.nav li:hover>ul{display:block}.banner img{width:100%}style>
head>
<body><div id="nav" class="nav"><div class="container"><ul><li><a href="#">homea>li><li><a href="#">javascripta><ul><li><a href="#">cssa>li><li><a href="#">html5a><ul><li><a href="#">angular.jsa>li><li><a href="#">node.jsa>li><li><a href="#">vue.jsa>li><li><a href="#">Reacta>li>ul>li><li><a href="#">jQuerya>li><li><a href="#">backbonea>li>ul>li><li><a href="#">editora><ul><li><a href="#">Sublime Texta>li><li><a href="#">Atoma>li><li><a href="#">Dreamweavera>li><li><a href="#">HBuildera>li>ul>li><li><a href="#">about usa>li><li><a href="#">Contact usa>li>ul>div>div><div class="img"><img src="image/1.jpg" alt="">div>
body>
html>
转载于:https://www.cnblogs.com/vicii/p/6145746.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！