1.HTML
<body>
<ul id="nevigation">
<li>
<button class="dropbtn">菜单一</button>
<ul class="list">
<li class="item"><a href="#" target="_blank">项目一</a></li>
<li class="item"><a href="#" target="_blank">项目二</a></li>
<li class="item"><a href="#" target="_blank">项目三</a></li>
<li class="item"><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
<li>
<button class="dropbtn">菜单一</button>
<ul class="list">
<li class="item"><a href="#" target="_blank">项目一</a></li>
<li class="item"><a href="#" target="_blank">项目二</a></li>
<li class="item"><a href="#" target="_blank">项目三</a></li>
<li class="item"><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
<li>
<button class="dropbtn">菜单一</button>
<ul class="list">
<li class="item"><a href="#" target="_blank">项目一</a></li>
<li class="item"><a href="#" target="_blank">项目二</a></li>
<li class="item"><a href="#" target="_blank">项目三</a></li>
<li class="item"><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
<li>
<button class="dropbtn">菜单一</button>
<ul class="list">
<li class="item"><a href="#" target="_blank">项目一</a></li>
<li class="item"><a href="#" target="_blank">项目二</a></li>
<li class="item"><a href="#" target="_blank">项目三</a></li>
<li class="item"><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
</ul>
</body>
2.CSS样式
<style type="text/css">
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #fff;
}
li {
list-style: none;
}
#nevigation li {
float: left;
text-align: center;
position: relative;
}
.dropbtn {
background-color: #0098c2;
color: white;
border: none;
height: 40px;
width: 80px;
margin-right: 5px;
}
.list {
display: none;
font-size: 12px;
width: 80px;
margin-right: 5px;
}
.item {
width: 100%;
height: 40px;
border: 1px solid #fff;
background-color: #255f9e;
}
.item a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
}
.item a:hover {
background-color: #ffb100;
}
.change {
display: block;
font-size: 12px;
width: 80px;
margin-right: 5px;
}
</style>
<script>
var btns = document.getElementsByClassName('dropbtn');
/* var lists = document.getElementsByClassName('list');
function myDropdown(i) {
var btn = btns[i];
var temp = lists[i];
btn.onfocus = function () {
temp.className = ' list change';
}
btn.onblur = function () {
temp.className = s'list';
}
}
myDropdown(1); */
for (var i = 0; i < btns.length; i++) {
btns[i].onmouseover = function () {
for (var i = 0; i < btns.length; i++) {
// nextElementSibling 得到下一个兄弟元素节点 即ul
btns[i].nextElementSibling.className = 'list';
}
this.nextElementSibling.className = 'list change';
}
}
</script>