如何在懸停上添加側面菜單

Question

我想添加側面菜單，如PRODUCT1，PRODUCT2等子菜單，將鼠標懸停在其上方。我如何在下面的代碼中做到這一點？

這是我到目前爲止的代碼。

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 300); 
@charset"UTF-8"; 

/* Base Styles */ 
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    font-weight: normal; 
    text-decoration: none; 
    line-height: 1; 
    font-family:'Open Sans', sans-serif; 
    font-size: 14px; 
    position: relative; 
} 
#cssmenu a { 
    line-height: 1.3; 
} 
#cssmenu { 
    width: 300px; 
    margin-left: 90px; 
    background: #A3FFFF; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 3px; 
    padding: 3px; 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); 
} 
#cssmenu > ul > li { 
    margin: 0 0 3px 0; 
} 
#cssmenu > ul > li:last-child { 
    margin: 0; 
} 
#cssmenu > ul > li > a { 
    font-size: 15px; 
    display: block; 
    color: #ffffff; 
    text-shadow: 0 1px 1px #000; 
    background: #A3FFFF; 
    background: -moz-linear-gradient(#565656 0%, #323232 100%); 
    background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232)); 
    background: -webkit-linear-gradient(#565656 0%, #323232 100%); 
    background: linear-gradient(#565656 0%, #323232 100%); 
    border: 1px solid #000; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#cssmenu > ul > li > a > span { 
    display: block; 
    border: 1px solid #666666; 
    padding: 6px 10px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    font-weight: bold; 
} 
#cssmenu > ul > li > a:hover { 
    text-decoration: none; 
    font-weight: bold; 
} 
#cssmenu > ul > li.active { 
    border-bottom: none; 
} 
#cssmenu > ul > li.active > a { 
    background: #47A3FF; 
    background: -moz-linear-gradient(#47A3FF 0%, #47A3FF 100%); 
    background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #47A3FF), color-stop(100%, #47A3FF)); 
    background: -webkit-linear-gradient(#47A3FF 0%, #47A3FF 100%); 
    background: linear-gradient(#47A3FF 0%, #47A3FF 100%); 
    color: #fff; 
    text-shadow: 0 1px 1px #fff; 
    border: 1px solid #47A3FF; 
} 
#cssmenu > ul > li.active > a span { 
    border: 1px solid #47A3FF; 
} 
#cssmenu > ul > li.has-sub > a span { 
    background: url(images/icon_plus.png) 98% center no-repeat; 
} 
#cssmenu > ul > li.has -sub.active > a span { 
    background: url(images/icon_minus.png) 98% center no-repeat; 
} 
/* Sub menu */ 
#cssmenu ul ul { 
    padding: 5px 12px; 
    display: none; 
} 
#cssmenu ul ul li { 
    padding: 3px 0; 
} 
#cssmenu ul ul a { 
    display: block; 
    color: #191975; 
    font-size: 13px; 
    font-weight: bold; 
} 
#cssmenu ul ul a:hover { 
    color: cornflowerblue; 
    font-weight:bold; 
} 

JS：

(function ($) { 
    $(document).ready(function() { 
     $('#cssmenu > ul > li > a').click(function() { 
      $('#cssmenu li').removeClass('active'); 
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next(); 
      if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
       $(this).closest('li').removeClass('active'); 
       checkElement.slideUp('normal'); 
      } 
      if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#cssmenu ul ul:visible').slideUp('normal'); 
       checkElement.slideDown('normal'); 
      } 
      if ($(this).closest('li').find('ul').children().length == 0) { 
       return true; 
      } else { 
       return false; 
      } 
     }); 
    }); 
})(jQuery); 

HTML：

<div id='cssmenu'> 
    <ul> 
     <li class='has-sub'> 
      <a href='#'><span>CENTRAL COMPLIANCE</span></a> 
      <ul> 
       <li><a href='#'><span>PRODUCT 1</span></a></li> 
       <hr> 
       <li><a href='#'><span>PRODUCT 2</span></a></li> 
       <hr> 
       <li><a href='#'><span>PRODUCT 3</span></a></li> 
       <hr> 
       <li><a href='#'><span>PRODUCT 4</span></a></li> 
       <hr> 
       <li><a href='#'><span>GEPOC</span></a></li> 
       <hr> 
       <li><a href='#'><span>Global Registration</span></a></li> 
       <hr> 
       <li><a href='#'><span>MBL</span></a></li> 
       <hr> 
       <li><a href='#'><span>Account Affirmations</span></a></li> 
       <hr> 
       <li class='last'><a href='#'><span>Outside Affiliations</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'> 
      <a href='#'><span>CONTROL ROOM</span></a> 
      <ul> 
       <li><a href='#'><span>CDS</span></a></li> 
       <hr> 
       <li><a href='#'><span>UK Registration</span></a></li> 
       <hr> 
       <li class='last'><a href='#'><span>Compliance Portal</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'> 
      <a href='#'><span>LARGE HOLDINGS</span></a> 
      <ul> 
       <li class='last'><a href='#'><span>LHO</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'> 
      <a href='#'><span>ORCHESTRIA</span></a> 
      <ul> 
       <li class='last'><a href='#'><span>Orchestria</span></a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

請幫我修改這個代碼。謝謝。

Answer 1

css屬性：懸停應該很好。從無顯示的div開始。然後在產品1懸停時，例如，切換到顯示塊。

.side-menu { 
    display:none; 
} 
.product1:hover > .side-menu { 
    display:block; 
} 

重要的是要注意，如果要隱藏和顯示菜單項是你將鼠標懸停在該項目的一個子這隻能是很重要的。這對你來說不應該是個問題。

編輯澄清： 在您的HTML添加ul，將舉行你的側面菜單。爲ul分配一個類。這是你如何創建一個嵌套列表。還要向李產品1添加一個類，以便我們可以選擇它。

<li><a href="#" class="product1">Product1</a></li> 
    <ul class="side-menu"> 
    <li>first sub menu item</ul> 
    </ul> 
</li> 

現在你的CSS。這將與我上面寫的相同，因爲我使用了相同的類名。會發生什麼情況是當頁面加載側面菜單將被隱藏，因爲顯示設置爲無。當您：將鼠標懸停在類別爲'product1'的html元素上時，它將側邊菜單的顯示屬性從無變爲塊。

您仍然需要適當地放置新菜單項。