html檔案

<nav>
    <ul>
        <li><a href="#">選單1</a></li>
        <li><a href="#">選單2</a>
            <ul>
                <li><a href="#">選單2-1</a></li>
                <li><a href="#">選單2-2</a>
                    <ul>
                        <li><a href="#">選單2-2-1</a></li>
                        <li><a href="#">選單2-2-2</a></li>
                         <li><a href="#">選單2-2-3</a></li>
                        <li><a href="#">選單2-2-4</a></li>
                        
                    </ul>
                </li>
                <li><a href="#">選單2-3</a>
                    <ul>
                        <li><a href="#">選單3</a></li>
                        <li><a href="#">選單4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>
 

css檔案

 nav {     
  	height:50px;
	width:850px;	
	background:#eee;
	margin:0 auto;/*0 上下 auto 左右*/
	margin-top: 50px;
	margin-bottom:50px;
}
 
nav ul ul {
    display: none;   /*該元素不會顯示*/
}
 
    nav ul li:hover > ul {   /* > 子選單選擇器 滑鼠在li上的時候 改變子ul的display屬性*/
        display: block;
    }
 
 
nav ul {
    list-style: none;  /*所有的列表屬性*/
    position: relative; /*相對定位ul的位置*/
    
}
   
    nav ul li {
        width:250px;
		height:50px;
        float: left;  /*使豎向選單變為橫向選單*/
    }
 
        nav ul li:hover {  
            background:#666;
            
        }
            nav ul li:hover a {
                color: #fff;
            }
         
        nav ul li a {
            display: block;  /*使a標籤變成塊狀*/
            padding: 10px 40px; /*a標籤左右的距離*/
			text-align:center;
            color:#CCC; 
            text-decoration: none; /*文字的屬性*/
        }
             
         
    nav ul ul {
        background:#666;
        border-radius: 0px; padding: 0;
        position: absolute; /*定義子ul的位置*/
         top: 100%;  
    }
        nav ul ul li {
            float: none;  /*清楚子ul裡面li標籤的浮動*/
            border-top: 1px solid #6b727c; /*下拉選單中的分割線*/
            border-bottom: 1px solid #575f6a; 
            position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #333;
            }   
                nav ul ul li a:hover {
                    background: #333;
                }
         
    nav ul ul ul{
        position: absolute; 
		left: 100%; 
		top:0;
    }