1.编写导航，下拉菜单等style样式

导航：主菜单，子菜单，颜色，字体，大小，列表，链接，边距等，如下图：

对应代码如下：
<!DOCTYPE html><html lang="en">
<head><mate charset="UTF-8" />
<mate name="viewport" cantent="width=device-width ,initial-scale=1.0" /><title>php中文网</title>
<style>*{
margin: 0;padding: 0;
box-sizing: border-box;}
a{color: #bbb;
text-decoration: none;}
#nav{background-color: black;
height: 50px;line-height: 50px;
}li{
list-style: none;margin: 0 10px;
float: left;}
#nav > li > a:hover{color: white;
}#nav >li {
position: relative;}
#nav > li > ul{position: absolute;
top: 50px;width: 180px;
border: 1px solid #aaa;border-top: none;
}#nav > li > ul > li a {
display: inline-block;height: 50px;
color: #444;}
ul.sub li:hover {backgruond-color: #eee;
}#nav > li > ul {
display: none;}
</style></head>
<body> <ul id="nav">
<li><a href="">首页</a></li> <li><a href="">视频教程</a></li>
<li> <a href="">资源下载</a>
<ul> <li><a href="">PHP工具</a></li>
<li><a href="">在线手册</a></li> <li><a href="">学习课件</a></li>
<li><a href="">网站源码</a></li> </ul>
</li> <li><a href="">社区问答</a></li>
<li> <a href="">技术文章</a>
<ul> <li><a href="">头条</a></li>
<li><a href="">博客</a></li> <li><a href="">php教程</a></li>
<li><a href="">php框架</a></li> </ul>
</li> </ul>
</body></html>

2.编写导航，下拉菜单等javascript样式

先要获取所有主菜单，另外要判断主菜单下面有没有子菜单,如果有,鼠标移入主菜单时，那么就显示子所有菜单，鼠标移出时，关掉子菜单。

运用事件监听，事件委托，（捕获：从外向内、冒泡：从内向外）代码如下：

<script>const navs = document.querySelectorAll(“#nav > li”);
navs.forEach(function (nav) {nav.addEventListener(“mouseover”, showSubMenu);
nav.addEventListener("mouseout", closeSubMenu);});
function showSubMenu(ev) {if (ev.target.nextElementSibling !== null) {
ev.target.nextElementSibling.style.display = "block";}
}function closeSubMenu(ev) {
if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = “none”;
}}</script>