1
我实现了一个JavaScript的菜单到我的网站菜单的Javascript多层次重叠
http://www.ogormanconstruction.co.uk/work
如果选择了“工作”，然后选择“联系”两个子菜单重叠
有没有办法保证只显示所选的子菜单？
这是我使用
<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:[email protected]">[email protected]</a><br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br /><a href="mailto:[email protected]">[email protected]</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>
这个JavaScript是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;
}