进阶实战 下拉菜单栏

1. html 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
</head>
<body>
  <nav id="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li>Serviecs <i class="fas fa-angle-down"></i>
        <ul>
          <li><a href="#">Web Development</a></li>
          <li><a href="#">Website Design</a></li>
          <li><a href="#">Mobile Development</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li>Blog <i class="fas fa-angle-down"></i>
        <ul>
          <li><a href="#">HTML</a><span>22 Posts</span></li>
          <li><a href="#">JavaScript</a><span>16 Posts</span></a></li>
          <li><a href="#">Python</a><span>10 Posts</span></a></li>
          <li><a href="#">PHP</a><span>13 Posts</span></a></li>
          <li><a href="#">Design</a><span>10 Posts</span></a></li>
          <li><a href="#">CSS</a><span>21 Posts</span></a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <header id="showcase">
    <h1>欢迎来到 铄洋在线</h1>
  </header>
</body>
</html>

2. css 样式

:root {
  --primtay-color: rgb(255, 81, 0);
  --secondary-color: rgb(214, 116, 51);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,body {
  background: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar ul{
  list-style: none;
}
#navbar ul li {
   color: #333;
   display: inline-block;
   padding: 1rem;
   position: relative;
 }

#navbar ul li a{
   color: #333;
   text-decoration: none;
 }

/* hide neatad ul by default */
#navbar ul li ul {
  display: none;
}

#navbar ul li:hover{
  cursor: pointer;
  background: var(--primtay-color);
  color: #fff;
}
#navbar ul li:hover a {
  color: #fff;
}

/* naeted dropdown show */

#navbar ul li:hover ul{
  display: block;
  position: absolute;
  left: 0;
  width: 200px;
  margin-top: 1rem;
}
#navbar ul li:hover ul li{
  display: block;
  background: #e7e7e7;
}
#navbar ul li:hover ul li a{
  color: #333;
}
#navbar ul li:hover ul li:hover {
  background-color: #e0e0e0;
  color: inherit;
}
#navbar ul li:hover ul li span{
  float: right;
  color: #fff;
  background: var(--secondary-color);
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 5px;
}
#navbar ul li:hover ul li:hover span{
  background: var(--secondary-color);
}
/* showcase */
#showcase {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: 0 2rem;
  background-color: coral;
}
#showcase h1{
  color: #fff;
  font-size: 4rem;
}
/* media */
@media (max-width: 600px) {
  #navbar ul li{
    display: block;
  }
  #navbar ul li:hover ul {
    width: 100%;
    position: relative;
  }
}

3. 重点

:hover 鼠标划入出现的效果

posted @ 2022-03-27 11:45  会前端的洋  阅读(26)  评论(0)  编辑  收藏  举报