实战使用css选择器做一个下拉菜单-在线源码网

下拉菜单实战

html代码

<!DOCTYPE html>
<html lang="zh-CN">
  <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>下拉菜单</title>
    <link rel="stylesheet" href="/使用csss选择器做一个下拉菜单/index.css" />
  </head>
  <body>
    <div class="box">
      <label for="xl">下拉菜单</label>
      <input type="checkbox" name="xl" id="xl" />
      <ul>
        <li><a href="">菜单1</a></li>
        <li><a href="">菜单2</a></li>
        <li><a href="">菜单3</a></li>
        <li><a href="">菜单4</a></li>
        <li><a href="">菜单5</a></li>
      </ul>
    </div>
  </body>
</html>

css代码

/* 首先隐藏input方框 */
#xl {
  display: none;
}
/* 隐藏下拉菜单,需要的时候在呼出 */
#xl + ul {
  display: none;
}

/* 点击label呼出菜单 */
#xl:checked + ul {
  display: block;
}

/* 随便改下样式，让他好看点 */
/* 给ui一个背景 */
.box ul {
  background: #000;
  width: 60px;
}
.box label {
  padding: 5px 15px;
  background: #16dee1;
  color: #fff;
}
/* 取消li标签的小黑点 */
.box li {
  list-style: none;
}
/* 取消A标签下划线 */
.box li a {
  text-decoration: none;
  color: #fff;
}

完整样式

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1、本网站名称：在线源码网
2、本站永久网址：https://zaixym.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END