Alle dropdown-menuerne kommer ned på en gang.
HejJeg har brug for lidt hjælp, til at gøre et script helt færdig.
Jeg har to menupunkter. Når jeg kører musen hen over en af dem, kører begge dropdown-menuerne ned.
Hvordan får jeg rettet mit script til, så det kun er menupunktet som musen er hen over, der kører ned?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').stop().slideDown('medium');
},
function () {
$('ul.file_menu').stop().slideUp('medium');
}
);
});
</script>
<style >
#Icon_add {
position: absolute;
top: 13px;
left: 250px;
}
#Icon_sub {
position: absolute;
top: 13px;
left: 350px;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
}
.file_menu {
display:none;
width:150px;
border: 1px solid #1c1c1c;
}
.file_menu li {
background-color: #302f2f;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
<body>
<div id="Header_orange_container">
<div id="Icon_add">
<ul class="hover">
<li class="hoverli">
<img src="_pic/icon_add.png" width="75" height="75" class="menu_class" />
<ul class="file_menu">
<li><a href="#file">Level 1</a></li>
<li><a href="#edit">Level 2</a></li>
<li><a href="#view">Level 3</a></li>
<li><a href="#insert">Level 4</a></li>
<li><a href="#modify">Level 5</a></li>
</ul>
</li>
</ul>
</div>
<div id="Icon_multi">
<ul class="hover">
<li class="hoverli">
<img src="_pic/icon_sub.png" width="75" height="75" class="menu_class" />
<ul class="file_menu">
<li><a href="#file">Level 1</a></li>
<li><a href="#edit">Level 2</a></li>
<li><a href="#view">Level 3</a></li>
<li><a href="#insert">Level 4</a></li>
<li><a href="#modify">Level 5</a></li>
<li><a href="#modify">Level 6</a></li>
</ul>
</li>
</ul>
</div>
</div>
