如何使用 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` 屬性設置菜單項的邊框顏色。