CSS是一種用來(lái)控制網(wǎng)頁(yè)樣式的語(yǔ)言，可以用來(lái)調(diào)整字體、顏色、布局等各種方面。在網(wǎng)頁(yè)中，有時(shí)需要實(shí)現(xiàn)雙層的li效果，比如在導(dǎo)航菜單中有二級(jí)菜單。下面我們來(lái)看看如何使用CSS來(lái)控制雙層li。

一級(jí)菜單1
一級(jí)菜單2
二級(jí)菜單1
二級(jí)菜單2
一級(jí)菜單3

在上述代碼中，我們用

標(biāo)簽來(lái)表示一級(jí)菜單，用
• 標(biāo)簽來(lái)表示每個(gè)菜單項(xiàng)。如果需要添加二級(jí)菜單，則可以在需要二級(jí)菜單的
• 標(biāo)簽中再添加一個(gè)
  標(biāo)簽表示二級(jí)菜單，然后在其中添加每個(gè)二級(jí)菜單項(xiàng)的
  • 標(biāo)簽即可。

    接下來(lái)，我們通過(guò)CSS來(lái)修改這些菜單的樣式：

    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;
    }

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

    標(biāo)簽樣式設(shè)置為了不顯示任何項(xiàng)目符號(hào)，并且設(shè)置了padding、margin等屬性。然后將每個(gè)
    • 標(biāo)簽的display屬性設(shè)置為inline-block，使其水平排列，同時(shí)設(shè)置其position屬性為relative，以便后面設(shè)置二級(jí)菜單的絕對(duì)定位。

      當(dāng)鼠標(biāo)經(jīng)過(guò)每個(gè)

    • 標(biāo)簽時(shí)，我們?cè)O(shè)置其背景顏色，并顯示二級(jí)菜單。當(dāng)鼠標(biāo)經(jīng)過(guò)二級(jí)菜單項(xiàng)時(shí)，也會(huì)顯示背景顏色。我們使用了:hover偽類(lèi)來(lái)實(shí)現(xiàn)這些效果。

      注意，我們對(duì)每個(gè)二級(jí)菜單的

      標(biāo)簽設(shè)置了position屬性為absolute，這樣在其父級(jí)
      • 標(biāo)簽中設(shè)置了position為relative時(shí)，它的定位就是相對(duì)于父級(jí)
      • 標(biāo)簽的。另外，我們也將其display屬性設(shè)置為none，這樣在默認(rèn)情況下是不顯示的。

        最后，我們?cè)贑SS中設(shè)置了

      • 標(biāo)簽中的二級(jí)菜單項(xiàng)的樣式，這樣就可以讓它們?cè)陲@示時(shí)有自己的樣式了。

        通過(guò)上述CSS代碼的控制，我們可以實(shí)現(xiàn)雙層li的效果。需要注意的是，這只是一個(gè)示例，你可以根據(jù)自己的需要來(lái)修改CSS代碼，實(shí)現(xiàn)自己想要的效果。