做一个下拉菜单栏效果
网站首页的下拉菜单栏
下列为实例演示
以下为代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>状态栏</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#ststus {
width: 500px;
position: relative;
top: 50px;
margin: auto;
/* overflow: hidden; */
}
#tit {
float: left;
font-size: 20px;
font-weight: bold;
margin-left: 25px;
border-radius: 10px;
}
#tit:hover {
background: goldenrod;
/* box-shadow: 5px 5px 1px #888888; */
cursor: pointer;
}
#tit:hover ul {
display: block;
}
#tit ul li {
background: grey;
}
#tit ul {
position: absolute;
font-size: 20px;
font-weight: bold;
left: 110px;
top: 27px;
display: none;
}
li {
/* position: absolute; */
margin-top: 2px;
}
li:hover {
border: 1px solid black;
border-radius: 5px;
}
</style>
<body>
<div id="ststus">
<div id="tit">首页</div>
<div id="tit">产品展示
<ul>
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
<li>产品4</li>
<li>产品5</li>
</ul>
</div>
<div id="tit">解决方案</div>
<div id="tit">联系我们</div>
</div>
</body>
<!-- 普通下拉菜单无需js -->
<!-- <script>
//获取tit
var tit = document.getElementById("solve");
//获取li
var liList = Array.from(document.getElementsByTagName("li"));
// tit.addEventListener("click", titClick);
for (var i = 0; i < liList.length; i++) {
liList[i].addEventListener("click", liClick);
}
//click事件绑定
function titClick() {
alert("若产品存在使用问题，欢迎与我司联系");
}
//li点击
function liClick() {
alert("当前产品还在研发中");
}
</script> --></html>
