今天我們來(lái)學(xué)習(xí)一下如何制作一個(gè)漂亮的CSS導(dǎo)航欄。首先，我們需要準(zhǔn)備好HTML文件和CSS文件。在HTML文件中，我們需要使用ul和li標(biāo)簽來(lái)制作菜單的結(jié)構(gòu)。在CSS文件中，我們需要設(shè)置樣式來(lái)美化菜單。
第一步，讓我們先來(lái)制作HTML文件。我們需要使用ul和li標(biāo)簽，以及a標(biāo)簽來(lái)添加菜單項(xiàng)。代碼如下：

<ul id="menu">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">產(chǎn)品介紹</a></li>
<li><a href="#">新聞動(dòng)態(tài)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>

第二步，讓我們來(lái)制作CSS文件。我們需要使用樣式來(lái)美化菜單。代碼如下：

#menu {
list-style: none;
padding: 0;
margin: 0;
}
<br>
#menu li {
float: left;
position: relative;
}
<br>
#menu li a {
display: block;
padding: 8px 20px;
color: #333;
text-decoration: none;
}
<br>
#menu li:hover>a {
color: #fff;
background-color: #333;
}
<br>
#menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
background-color: #fff;
padding: 0;
margin: 0;
}
<br>
#menu li:hover ul {
display: block;
}
<br>
#menu li ul li {
float: none;
}
<br>
#menu li ul li a {
padding: 8px 15px;
color: #333;
}
<br>
#menu li ul li:hover>a {
color: #fff;
background-color: #333;
}

第三步，我們將使用JS添加下拉菜單的效果。代碼如下：

var menu = document.getElementById('menu');
var subMenus = menu.getElementsByTagName('ul');
for (var i = 0; i < subMenus.length; i++) {
var parentLi = subMenus[i].parentNode;
parentLi.onmouseover = function() {
this.getElementsByTagName('ul')[0].style.display = 'block';
}
parentLi.onmouseout = function() {
this.getElementsByTagName('ul')[0].style.display = 'none';
}
}

好了，現(xiàn)在我們完成了一個(gè)漂亮的CSS導(dǎo)航欄。我們只需要將HTML文件和CSS文件相互引用，就可以在網(wǎng)站中使用它了。