导航下拉菜单定位、事件

导航下拉菜单

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航下拉菜单</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li>
          <a href="">导航1</a>
          <dl>
            <dd>1项目1</dd>
            <dd>1项目2</dd>
            <dd>1项目3</dd>
            <dd>1项目4</dd>
          </dl>
        </li>
        <li>
          <a href="">导航2</a>
          <dl>
            <dd>2项目1</dd>
            <dd>2项目2</dd>
            <dd>2项目3</dd>
            <dd>2项目4</dd>
          </dl>
        </li>
        <li><a href="">导航3</a></li>
        <li><a href="">导航4</a></li>
        <li><a href="">导航5</a></li>
      </ul>
    </nav>
  </body>
  <script src="script.js"></script>
</html>

CSS

nav {
  width: 100%;
  height: 60px;
  background-color: black;
}
li {
  list-style: none;
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  position: relative;
}
a {
  color: gainsboro;
  text-decoration: none;
}
a:hover {
  color: white;
}
dl {
  display: none;
  position: absolute;
  top: 50px;
  width: 130px;
  border: 1px solid black;
}

javascript

const navs = document.querySelectorAll("li");
navs.forEach(function (nav) {
  nav.addEventListener("mouseover", showNextItem);
  nav.addEventListener("mouseout", closeNextItem);
});
function showNextItem(ev) {
  if (ev.target.nextElementSibling != null) {
    ev.target.nextElementSibling.style.display = "block";
  }
}
function closeNextItem(ev) {
  if (ev.target.nodeName === "A" && ev.target.nextElementSibling != null) {
    ev.target.nextElementSibling.style.display = "none";
  }
}

运行截图

总结

下拉菜单在鼠标移出之后会立马消失
如果下拉菜单中是链接的话就无法点击
需要学习的内容还有很多

定位、事件

CSS position 属性
|属性|描述|
|—-|—-|
|absolute|脱离文档流，一定要有一个定位父级作为定位参照物，否则就相对于 body 进行定位|
|relative|相对于其正常位置进行定位|
|fixed|元素的位置相对于浏览器窗口是固定位置|
事件 1.事件冒泡：事件最开始由最具体的元素接收由内向外传播事件 2.事件捕获：与事件冒泡相反由外向内传播事件

批改老师：