CSS是一種用來控制網頁樣式的語言，可以用來調整字體、顏色、布局等各種方面。在網頁中，有時需要實現雙層的li效果，比如在導航菜單中有二級菜單。下面我們來看看如何使用CSS來控制雙層li。

一級菜單1
一級菜單2
二級菜單1
二級菜單2
一級菜單3

在上述代碼中，我們用

標簽來表示一級菜單，用
• 標簽來表示每個菜單項。如果需要添加二級菜單，則可以在需要二級菜單的
• 標簽中再添加一個
  標簽表示二級菜單，然后在其中添加每個二級菜單項的
  • 標簽即可。

    接下來，我們通過CSS來修改這些菜單的樣式：

    ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    li {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    line-height: 30px;
    }
    li:hover {
    background-color: #f8f8f8;
    }
    li ul {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    padding: 0;
    margin: 0;
    }
    li:hover ul {
    display: block;
    background-color: #f8f8f8;
    }
    li ul li {
    display: block;
    padding: 0 20px;
    line-height: 30px;
    }
    li ul li:hover {
    background-color: #ebebeb;
    }

    在上面的代碼中，我們首先將

    標簽樣式設置為了不顯示任何項目符號，并且設置了padding、margin等屬性。然后將每個
    • 標簽的display屬性設置為inline-block，使其水平排列，同時設置其position屬性為relative，以便后面設置二級菜單的絕對定位。

      當鼠標經過每個

    • 標簽時，我們設置其背景顏色，并顯示二級菜單。當鼠標經過二級菜單項時，也會顯示背景顏色。我們使用了:hover偽類來實現這些效果。

      注意，我們對每個二級菜單的

      標簽設置了position屬性為absolute，這樣在其父級
      • 標簽中設置了position為relative時，它的定位就是相對于父級
      • 標簽的。另外，我們也將其display屬性設置為none，這樣在默認情況下是不顯示的。

        最后，我們在CSS中設置了

      • 標簽中的二級菜單項的樣式，這樣就可以讓它們在顯示時有自己的樣式了。

        通過上述CSS代碼的控制，我們可以實現雙層li的效果。需要注意的是，這只是一個示例，你可以根據自己的需要來修改CSS代碼，實現自己想要的效果。