CSS3是當前Web開發中一種炙手可熱的技術。其中，用CSS3制作導航菜單是一個很好的練習，也能為網站的用戶體驗增加不少分數。究竟如何用CSS3制作呢？接下來就來一一介紹。

nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333333;
position: relative;
text-align: center;
}
nav li {
display: inline-block;
margin-left: 70px;
margin-right: 70px;
}
nav a {
display: block;
font-size: 18px;
padding: 10px 20px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul {
display: none;
position: absolute; 
top: 60px;
}
nav ul li:hover >ul {
display:inherit;
}
nav ul ul li {
width:200px;
float:none;
display:list-item;
position: relative;
}
nav ul ul ul li{
position: relative;
top:-60px; 
left:200px;
}
nav a:hover, nav ul ul ul a{
background-color: #555555;
color:#ffffff;
text-decoration: none;
}

首先，先聲明一個nav元素，其下的整個結構都基于此。給ul列表設定了一些樣式，比如將list-style設為無，margin和padding設為0等等。用position:relative使得ul元素可以在其子元素中定位。text-align:center則為了使得li元素在水平上排列。

接下來，設置nav下的li和超鏈接a的樣式。其中，li元素用display:inline-block使得各個li元素在同一行水平排列，margin-left和margin-right設定了相對較大的值，保證了li元素之間能夠產生明顯的間隔。a元素的樣式則相對簡單，設置了樣式大小、內邊距、顏色等等，這里以白色為背景色，加粗字體為主題。

nav下的ul元素還有一個隱藏狀態下的子元素，需要特別處理。這里，用display:none使得其不在正常狀態下顯示，position:aboslute使得其不受其他元素的影響，top屬性設為60則使得其在父元素下方60個像素的高度顯示。當然，在鼠標滑過li元素時，將其狀態設為顯示（hover >ul）。

最后，設定鼠標滑過a元素的配色樣式，以及以下下拉列表的子元素也具有自己的背景色。