实现导航栏、固定顶部导航栏和辅助菜单
效果图表：
2018/11/16更新：
最近使用此导航栏时，如果页面在放大或缩小，我注意到导航栏的布局和显示有点问题，所以我重新查看并粘贴了css部分的代码
新的代码实现（优化布局）：
hmlheadstyletype=' text/CSS '.top {/*宽高背景色*/height: auto； /*自动设置高度*/width:100%； margin-left: 0； 后台： RGB (189、181、181 )； 定位：固定； /*固定在顶部*/top: 0； /*距顶部的距离为0*/margin-bottom: 5px； }.top ul{ /*标记的默认样式*/width: auto； /*宽度也自动*/list-style-type: none； white-space:nowrap； Overflow :隐藏； 玛格琳- left :5%的5%； /* margin-top: 0； */padding: 0； }.top li { float:left；/*使Li的内容横向浮动，即横向排列*/margin-right:2%；/*两个li之间的距离* /位置： relative； Overflow :隐藏； }.top li a{ /*设置链接内容显示的格式*/display: block； /*将链接显示为块元素时，整个链接区域为*/color:white； 文本对齐3360中心； padding: 3px； Overflow :隐藏； 文本修饰：无； /*下划线*/} .选择top Li a : hover {/*鼠标，背景为黑色*/background-color: #111； }.top ul li ul{ /*辅助菜单设置*/margin-left: -0.2px； 后台： RGB (189、181、181 )； position: relative； 显示：无； /*默认隐藏辅助菜单的内容*/}.top ul li ul li{ /*显示辅助菜单li的内容*/float:none； 文本对齐3360中心； }.top ul li:hover ul{ /*鼠标选择辅助菜单内容时，单击*/display: block； }body{ background:#eff3f5； }/stylebodydivclass=' top ' centerulliahref=' # '一级菜单/a/li lia href='# '一级菜单/a/li lia href='# '一级a ul lia href='# '二级菜单/a/li lia href='# '二级菜单/a/Li/ul/Li/ul/center/div/body/heady
设置hmlheadstyletype=' text/CSS '.top {/*宽度高度背景色*/height: 50px； width:100%； 后台： RGB (189、181、181 )； 定位：固定； /*固定在顶部*/top: 0； /*距顶部的距离为0*/} .top ul{ /*标记的默认样式*/width: 80%； 列表样式类型： none； margin: 0； padding: 0； Overflow :隐藏； } .top li { float:left；/*使Li的内容横向浮动，即横向排列*/margin-right:50px；/*两个li之间的距离*/} .top li a{ /*链接内容的显示格式*/display: block； /*将链接显示为块元素时，整个链接区域为*/color:white； 文本对齐3360中心； padding: 14px 16px； 文本修饰：无； /*下划线*/} .选择top Li a : hover {/*鼠标，背景为黑色*/background-color: #111； } .top ul li ul{ /*辅助菜单*/width: auto； 后台： RGB (189、181、181 )； 位置： absolute； 显示：无； /*默认隐藏辅助菜单的内容*/} .top ul li ul li{ /*显示辅助菜单li的内容*/margin-right:0； 浮点：无； 文本对齐3360中心； } .top ul li:hover ul{ /*鼠标选择辅助菜单内容时，单击*/display: block； }/stylebodydivclass=' top ' centerulliahref=' # '一级菜单/a/li lia href='# '一级菜单/' 2级菜单/a/li lia href='#级菜单/a/Li/ul/Li/ul/center/div/body/heady