h5学习笔记下拉菜单 2

最新推荐文章于 2024-05-09 21:24:37 发布

传说中的贫民窟

最新推荐文章于 2024-05-09 21:24:37 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/truhfcg/article/details/87930942

版权

h5学习笔记下拉菜单 2

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

有时候会觉得css 变得毫无章法地使用。在下拉菜单中，还有一种浮动的二级菜单。
展示一些商品。好像小米商城那个导航下拉菜单。如下图

这里写图片描述

下面模拟一下，做的过程也遇到一些小问题。例如不用position去定位的时候，触发二级的菜单的时候，总是有异常导致不能使用。对二级菜单展示到时候，加上position上去则神奇问题解决了
只是模拟了两个菜单选项。其他基本上一致，不过是这个菜单有很多细节的地方还是缺失。如阴影部分，如间距线的有一些要和一些不要。这个还是看这个是不是同列的产品了。所以要归类还得要思考如何去处理好。

原本想练习flex布局的，发现flex用起来还不熟悉。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>小米下拉菜单2</title>    </head>    <style type="text/css">        ul,li,p {            margin: 0;            padding: 0;        }        ul {            list-style: none;        }        .menu {            width:-webkit-fit-content;            width:-moz-fit-content;            margin: 0 auto;        }        .menu>ul>li {            float: left;            margin-right: 20px;            font-size: 13px;            padding: 20px 0;                    }        .menu>ul>li:hover {            color