Hjælp med Dropdown Mega Menu div
Jeg har fundet en Dropdown Mega Menu som jeg forsøger at få ind på min side, jeg løber dog ind i to problemer, som jeg håber I kan hjælpe med.1: Min Dropdown Mega Menu kommer til at ligge bagved en anden DIV
2: Den kører op og ned når jeg kører musen ind på den.
<!-- Add jQuery library -->
<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').slideDown('medium');
},
function () {
$('ul.file_menu').slideUp('medium');
}
);
});
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
min-width:1024px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#Header_black {
position: absolute;
height: 99px;
width: 100%;
background-color: #000000;
z-index:10;
}
#Header_orange {
top: 85px;
position: absolute;
height: 104px;
width: 100%;
background-color: #feb303;
z-index:9;
}
#Header_black_bar1 {
top: 188px;
position: absolute;
height: 1px;
background-color: #000000;
z-index:15;
width: 100%;
}
#Container {
top: 0px;
position: relative;
width: 1024px;
margin-right: auto;
margin-left: auto;
z-index:20;
}
#Main {
top: 400px;
position: absolute;
width: 1000px;
height: 420px;
background-color: #feb303;
}
#Header_orange_container {
top: 0px;
position: absolute;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#Icon_add {
position: absolute;
top: 13px;
left: 250px;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
}
.file_menu {
display:none;
width:300px;
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_black"> </div>
<div id="Header_orange">
<div id="Header_orange_container">
<div id="Icon_add">
<ul class="hover">
<li class="hoverli">
<img src="https://stuffizcool.files.wordpress.com/2011/04/round_glossy_green_button_by_fbouly1.png?w=300&h=300" width="50" height="50" class="menu_class" />
<ul class="file_menu">
<li><a href="#file">File</a></li>
<li><a href="#edit">Edit</a></li>
<li><a href="#view">View</a></li>
<li><a href="#insert">Insert</a></li>
<li><a href="#modify">Modify</a></li>
<li><a href="#control">Control</a></li>
<li><a href="#debug">Debug</a></li>
<li><a href="#window">Window</a></li>
<li><a href="#help">Help</a></li>
</ul>
<li>
</ul>
</div>
</div>
</div>
<div id="Header_black_bar1"> </div>
<div id="Container">
<div id="Main">
</div>
</div>
