目標是當鼠標懸浮在導航欄上時琅轧，出現(xiàn)指定的二級菜單。
首先先將基本的導航框架寫好踊挠。
html和css代碼
<body>
<nav class="clearfix">
<div class="topNavBar">
<ul class="clearfix">
<li>
<a>主頁</a>
</li>
<li>
<a>介紹</a>
</li>
<li>
<a>技能</a>
</li>
<li>
<a>關于</a>
</li>
</ul>
</div>
</nav>
</body>
<style>
.clearfix:after{content: ''; display: block; clear: both;}
*{margin: 0; padding: 0;}
ul, ol{list-style: none;}
a{text-decoration: none; cursor: pointer;}
nav{position: fixed; box-sizing: border-box; width: 100%; padding:12px; background: #fdf5e6;}
.topNavBar > ul{float: right;}
.topNavBar > ul > li{float: left; margin: 0 16px;}
</style>
接下來就是寫對應的二級菜單乍桂，這個二級菜單ul的位置很關鍵，可以寫在一級導航li的a里面
<li>
<a>技能
<ul>
<li>javascript</li>
<li>html</li>
<li>css</li>
</ul>
</a>
</li>
也可以寫在a外面效床。
<li>
<a>技能</a>
<ul>
<li>javascript</li>
<li>html</li>
<li>css</li>
</ul>
</li>
為了不使a標簽變得復雜和結構混亂睹酌，我們選擇后者。（這才是正常人的做法吧- -!）
為了不讓二級菜單占據(jù)父元素的寬度扁凛，我們讓它定位以脫離文檔流忍疾。
.topNavBar > ul > li > ul{
padding: 8px;
position: absolute;
top: 100%;
background: white;
white-space: nowrap;
box- shadow: 0 0 5px rgb(0, 0, 0, 0.5);
}
absolute定位后，li元素會被壓縮谨朝，nowrap禁止換行卤妒。
到目前為止甥绿，這個頂部導航欄的主干的html部分和css部分基本完成，就剩下js部分了则披。
因為我們是想通過鼠標懸浮顯示二級菜單共缕，那么我們只需要一開始就把二級菜單隱藏，當鼠標移動到一級導航時顯示二級菜單就好了士复。
<script>
let liTags = document.querySelectorAll(".topNavBar > ul > li");
for (let i=0; i<liTags.length; i++){
liTags[i].onmouseenter = function (e) {
let li = e.currentTarget;
li.classList.add("active");
}
liTags[i].onmouseleave = function (e) {
let li = e.currentTarget;
li.classList.remove("active");
}
}
</script>
.topNavBar > ul > li. > u{
display: none;
}
.topNavBar > ul > li.active > ul{
display: block;
}
現(xiàn)在一個干凈簡單的導航欄就完成了图谷。
