方法一：使用HTML和CSS實現

首先是Html程式碼，習慣上會將選單放在一個div裡，使用盒子模型，方便以後的操作和設定樣式。

二級選單也就是在一級選單中的li中再新增一個ul-li結構

<div class="test">
	<ul>
        	<li>A</li>
            	<li>B</li>
            	<li>C
                 	<ul>
                    		<li>C1</li>
                    		<li>C2</li>
                    		<li>C3</li>
                	</ul>
           	</li>
 	</ul>
</div>
 

使用css程式碼設定樣式

<style type="text/css">
        .test ul{
            list-style-type: none;

        }

        .test ul li{

            float:left;

            /*以下設定僅為方便檢視效果*/
            width:50px;
            height:20px;
            border:1px solid black;
            text-align: center;
        }

        .test ul li ul{
            display: none;
        }

        .test li:hover ul{
            display:block;
        }

</style>
 

解釋三個重要的css程式碼：

1.寫出一個ul-li選單時，它會預設垂直排列，而我們需要的是水平的選單欄，所以需要設定li的浮動：float：left

2.當滑鼠懸浮在有二級選單的一級選單選項時，才會出現二級選單，所以在滑鼠不懸浮的情況下，需要把二級隱藏起

來display：none

3.最後，設定li :hover ul 這個意思是，當滑鼠懸浮在li上時，li下的ul呈現狀態，hover是懸浮的意思，在設定a標籤樣

式時應該會接觸過

方法二：使用jQuery實現

要用到jQuery首先第一步就是引入jquery.js檔案

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

在平時做網頁專案時，最好是將css，html，js分開，在html頁面中引入css和js檔案，css檔案引入放在head中，js放在body的最後，這是為了在載入網頁時，先加載出它的樣式，最後載入js動態。那麼注意了，在這裡如果你的js程式碼是放在body中，那麼引入jquery檔案必須放在js程式碼之前，瀏覽器編譯html檔案時，是從上自下編譯的，如果jquery檔案放在最後，那麼在你的js程式碼又使用到了jquery的功能，後果可想而知，效果是出不來的。

下面兩種方式都是可行的，第一種二級選單出現的很直接，fade呢有一個漸入漸出的過程

200，300的都是時間，估計是以ms為單位，有待查驗。

js程式碼：

<script type="text/javascript">
        /* js 語句 $(function(){});*/
        $(function(){
            $(".test li").hover(
                    /*找父親（li）下面的ul*/
                    function() {
                        $(this).find("ul").show(200);
                    },function(){
                        $(this).find("ul").hide(300);
                    }
            );

            $(".test li").hover(
                    function(){
                        $(this).find("ul").fadeIn(300);
                    },function(){
                        $(this).find("ul").fadeOut(300);
                    }
            );
        });
</script>

方法三：使用Bootstrap實現

如果不瞭解Bootstrap是什麼，出門找百度諮詢一下

和jquery類似的，需要引入三個檔案：

1. bootstrap.min.css   2.  jquery-3.1.0.min.js  3. bootstrap.min.js

因為bootstrap所有js程式碼都是需要jquery做支撐的，所以只要引入bootstrap.js都必須引入jquery

其實博主前面都偷了個懶，沒有給每個li新增a標籤，在實際操作中這是非常必要的，除非你要做一個不實現跳轉功能

的擺設選單，那就隨便怎麼玩了。使用Bootstrap框架就必須使用a標籤了，因為它的很多樣式是設定在a標籤上的，

不使用沒有效果，相比前面的兩種來說，使用框架又省力又省心，非常簡單。

只需三步：

1.為一級選單的ul新增class-nav nav-pills（或者nav-tabs 等等）

2.為一級選單中有下拉二級選單的li新增 class-dropdown

為a標籤新增屬性：data-toggle="dropdown" 以及class-dropdown-toggle

3.給2步驟中li下的ul新增class-dropdown-menu

例項：

<ul class="nav nav-pills">
    <li>
        <a href="#">A</a>
    </li>
    <li class="dropdown">
        <!-- span標籤 是新增一個下三角的圖示 -->
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">B<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">B1</a></li>
            <li><a href="#">B2</a></li>
            <li><a href="#">B3</a></li>
            <li><a href="#">B4</a></li>
        </ul>
    </li>
    <li><a href="#">C</a></li>
</ul>