无下拉菜单的导航栏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}a {text-decoration: none;font-size: 14px;}li {list-style: none;}.nav {margin: 100px;}.nav li {float: left;width: 80px;height: 40px;text-align: center;line-height: 40px;}.nav li a {display: block;width: 100%;height: 100%;color: #333;}.nav li a:hover {background-color: #eee;}</style></head><body><ul class="nav"><li><a href="#">登录</a></li><li><a href="#">登录</a></li><li><a href="#">登录</a></li></ul></body></html>
有下拉菜单的导航栏
注意子选择器>的使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}a {text-decoration: none;font-size: 14px;}li {list-style: none;}.nav {margin: 100px;}.nav>li {float: left;width: 80px;height: 40px;text-align: center;line-height: 40px;}.nav li a {display: block;width: 100%;height: 100%;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul a:hover {background-color: #FFF5DA;}</style></head><body><ul class="nav"><li><a href="#">登录</a><ul><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li></ul></li><li><a href="#">登录</a><ul><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li></ul></li><li><a href="#">登录</a><ul><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li></ul></li></ul><script>var nav = document.querySelector('.nav');var lists = nav.children;for(var i = 0; i < lists.length; i++) {lists[i].onmouseover = function() {this.children[1].style.display = 'block';}lists[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script></body></html>
