2023年7月9日发(作者：)

jquery实现垂直和⽔平菜单导航栏本⽂实例为⼤家分享了jquery菜单导航栏的实现代码，供⼤家参考，具体内容如下代码

• 菜单 1
  • 菜单1.1
  • 菜单1.2
  • 菜单1.3
• 菜单 2
  • 菜单2.1
  • 菜单2.2
  • 菜单2.3
  • 菜单2.4
• 菜单 3
  • 菜单3.1
  • 菜单3.2
  • 菜单3.3
• 菜单 4
  • 菜单4.1
  • 菜单4.3
• 菜单 5
  • 菜单5.1
  • 菜单5.2

• 菜单 1
  • 菜单1.1
  • 菜单1.2
  • 菜单1.3
• 菜单 2
  • 菜单2.1
  • 菜单2.2
  • 菜单2.3
  • 菜单2.4
• 菜单 3
  • 菜单3.1
  • 菜单3.2
  • 菜单3.3
• 菜单 4
  • 菜单4.1
  • 菜单4.3
• 菜单 5
  • 菜单5.1
  • 菜单5.2

代码*{ margin: 0px; padding: 0px;}.content{ margin: 40px 100px; float: left;}ul ,li{ list-style: none;

}.main,.hmain{ width: 150px; background: #222; font-size: 16px; text-align: center; cursor: pointer; line-height: 40px; color: white;}.main>a,.hmain>a{ text-decoration: none; color: white; display: inline-block; width: 150px; min-height: 40px;}.main:hover,.hmain:hover{ background: black;}.child{ background: #444; display:none;}.child li:hover{ background: #333333;}

/*垂直导航栏左浮动*/.hmain{ float: left;}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。