1.最簡(jiǎn)單的下拉菜單

<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        padding: 12px 16px;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

<div class="dropdown">
  <span>鼠標(biāo)移動(dòng)到我這据沈！</span>
  <div class="dropdown-content">
    <p>菜鳥教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

鼠標(biāo)移上去的時(shí)候顯示，不然不顯示锌介。
并且加了個(gè) box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);搞出點(diǎn)陰影，好像是彈出的似的隆敢，其實(shí)就是顯示而已崔慧。

2.下拉菜單，并且改變選中顏色

<style>
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1//改變內(nèi)容項(xiàng)的顏色
    }

    .dropdown:hover .dropdown-content {
        display: block;//鼠標(biāo)在上的時(shí)候顯示
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;//改變button的顏色
    }
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜單</button>
  <div class="dropdown-content">
    <a >菜鳥教程 1</a>
    <a >菜鳥教程 2</a>
    <a >菜鳥教程 3</a>
  </div>
</div>

3.下拉菜單是從左邊還是右邊彈出

<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">左</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">菜鳥教程 1</a>
    <a href="#">菜鳥教程 2</a>
    <a href="#">菜鳥教程 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">右</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">菜鳥教程 1</a>
    <a href="#">菜鳥教程 2</a>
    <a href="#">菜鳥教程 3</a>
  </div>
</div>

注意：寫在html中的style="left:0;"，就是指從這個(gè)元素的左邊偏移0個(gè)位置彈出悼泌。下一個(gè)是錯(cuò)的夹界，應(yīng)該為right:0彈出，代碼只是為了演示。其它的和代碼2基本一樣的丙者。