javascript - 菜单 Javascript 多级重叠

Question

我在我的网站上实现了一个 javascript 菜单

http://www.ogormanconstruction.co.uk/work

如果您选择“工作”然后选择“联系”，这两个子菜单会重叠

有没有办法确保只显示选中的子菜单？

这是我正在使用的javascript

<script type="text/javascript">
$(document).ready(function(){
$('#menu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$('#services').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>

<div id="menu" class="menu clearfix">
  <div class="toggle">Work</div>  
  <div class="items">  
    <ul>
<li><a href="http://www.ogormanconstruction.co.uk/basingstoke-treatment-works">Basingstoke Treatment Works</a></li>
      <li><a href="">Project Two</a></li>
      <li><a href="">Project Three</a></li>
      <li><a href="">Project Four</a></li>
      <li><a href="">Project Five</a></li>
      <li><a href="">Project Six</a></li>
    </ul>
</div>
</div>

<div id="menu2" class="menu clearfix">
  <div class="toggle">Contact</div>  
  <div class="items">  
    <ul>
      <li>Mick O'Gorman<br /><a href="mailto:mick@ogormanconstruction.co.uk">mick@ogormanconstruction.co.uk</a><br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br /><a href="mailto:barry@ogormanconstruction.co.uk">barry@ogormanconstruction.co.uk</a><br />+44(0) 7515 569 086</li>
    </ul>
</div>
</div>

<div id="services" class="menu clearfix">
  <div class="toggle">Services</div>  
  <div class="items">  
    <ul>
      <li><a href="">Site Logistics</a></li>
      <li><a href="">Waste Management</a></li>
      <li><a href="">Security Services</a></li>
      <li><a href="">Traffic Management</a></li>
      <li><a href="">Multi Service Gangs</a></li>
      <li><a href="">Facilities & Accommodation</a></li>
      <li><a href="">Small Works & Maintenance</a></li>
      <li><a href="">Catering Services</a></li>
    </ul>
</div>
</div>

这是CSS

#menu {
    position: relative;
    top: 435px;
    left: -13px;
    width: 60px;
    height: 25px;
}

#menu2 {
    position: relative;
    top: 438px;
    left: -14px;
    width: 60px;
}

#services {
    position: relative;
    top: 470px;
    left: -14px;
    width: 60px;
}

.menu .items a:hover {
    text-decoration: none;
}

.menu .items a {
    font-size: 11px;
    color: #ABA099;
    text-decoration: none;
}

.menu .items {
    left: 180px;
    width: 250px !important;
}

.menu .items li {
    width: 250px;
    line-height: 19px;
    font-size: 11px;
    color: #ABA099;
    height: 19px;
}   

.menu .items li a:hover {
    color: #4D4D4F;
}

.menu .toggle {
    color: #ABA099;
    font-weight: normal;
}

.menu .toggle-hover {
    color: #4D4D4F;
}

Answer 1

将所有 LI 样式移至 A 标签。使用 display:block 作为您的 A 标签。