原⽣JS+CSS实现⼀个简单带⼆级菜单顶部导航⽬标是当⿏标悬浮在导航栏上时，出现指定的⼆级菜单。
⾸先先将基本的导航框架写好。
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>
js导航栏下拉菜单
<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标签变得复杂和结构混乱，我们选择后者。（这才是正常⼈的做法吧- -!）
为了不让⼆级菜单占据⽗元素的宽度，我们让它定位以脱离⽂档流。
.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;
ve("active");
}
}
</script>
.topNavBar > ul > li. > u{
display: none;
}
.topNavBar > ul > li.active > ul{
display: block;
}
现在⼀个⼲净简单的导航栏就完成了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。