css二级菜单怎么出现框 |动易css页码样式

HTML 代码：

“`html

<li><a href=”#”>一级菜单</a></li>

<li><a href=”#”>二级菜单一</a></li>

<li><a href=”#”>二级菜单二</a></li>

<li><a href=”#”>二级菜单三</a></li>

<li><a href=”#”>二级菜单四</a></li>

</ul>

CSS 代码：

“`css

#二级菜单 {

list-style-type: none;

margin: 0;

padding: 0;

display: flex;

flex-wrap: wrap;

#二级菜单 li {

display: flex;

justify-content: space-between;

padding: 10px;

#二级菜单 a {

color: #fff;

text-decoration: none;

padding: 10px;

#二级菜单 li a:hover {

background-color: #007bff;

上述代码实现了一个简单的二级菜单，其中包含一个框。CSS 代码中使用了 `flex` 布局，使得菜单列表可以自适应宽度，并使用 `justify-content: space-between` 设置了列表之间的分隔线。同时，使用 `padding` 属性设置了菜单项的文本和边框高度。当鼠标悬停在菜单项上时，会触发 `hover` 状态，这时会使用 `background-color` 属性设置菜单项的边框颜色。