如何在不损坏代码段的情况下创建下拉菜单

Question

https://github.com/nedzone/uht-yniversitet嗨，所以你可以查看我的代码，我问你可以帮我做一个下拉菜单

<div class="boxwhitetop"> <!-- бяла част на менюто -->
    <ul class="snip1488"> <!-- меню горна лента -->
      <li class="current"><a href="#">Начало</a></li>
      <li>
        <a href="#">Факултети</a>
        <ul>
          <a href="#">1</a>
          <a href="#">2</a>
          <a href="#">3</a>
        </ul>
      </li>
      <li><a href="#">Ръководство</a></li>
      <li><a href="#">Спортен комплекс</a></li>
      <li><a href="#">Новини</a></li>
      <li><a href="#">Разсписи</a></li>
    </ul>

Answer 1

有很多方法可以做到这一点......根据您的代码，这是一个简单的方法：

HTML

<div class="boxwhitetop"> <!-- бяла част на менюто -->

<!-- button to open/close the menu  --> 
<button class ="menu" >Menu</button>

<ul class="snip1488"> <!-- меню горна лента -->
  <li class="current"><a href="#">Начало</a></li>
    <li>
      <a href="#">Факултети</a>
      <ul>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
      </ul>
    </li>
    <li><a href="#">Ръководство</a></li>
    <li><a href="#">Спортен комплекс</a></li>
    <li><a href="#">Новини</a></li>
    <li><a href="#">Разсписи</a></li>
  </ul>

JS脚本

$(".menu").Click(function(){

      $(this).siblings(".snip1488").slideToggle(300);

 });

我希望它很有用

Answer 2

如果你想要一个带下拉菜单的水平菜单，你可以只用CSS做到这一点。您应该创建列表项display: inline-block，然后在悬停时使用display: block/none切换子菜单。像这样：http://codepen.io/anon/pen/OXPPyB