- <!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>
来源: http://www.jianshu.com/p/49c102f7352d