Css & Jquery Drop Down Menu

[Fallin-Again]

Hey guys,

I got my drop down menu to work good, but anything thats added after the menu moves down every time the menu drops. Tried changing the value of position but no luck. Here is my code:

HTML

<a href="http://www.ividsonline.com/">
<img src="/layout/btn_home.png" alt="Home" name="home" border="0" onMouseOver="window.document.home.src = '/layout/btn_home_on.png';" onMouseOut="window.document.home.src = '/layout/btn_home.png';"/>
</a>

<img src="/layout/nav_sep.png" alt=""/>

<img src="/layout/btn_live.png" alt="Live" name="live" border="0" onMouseOver="window.document.live.src = '/layout/btn_live_on.png';" onMouseOut="window.document.live.src = '/layout/btn_live.png';" class="menu_class" />
<ul class="the_menu">
<li>
<a href="#">Live Stream</a>
</li>
<li>
<a href="#">Featured Webseries</a>
</li>
<li>
<a href="#">Featured Film</a>
</li>
</ul>

<img src="/layout/nav_sep.png" alt=""/>

<a href="http://www.ividsonline.com/charts/">
<img src="/layout/btn_charts.png" alt="Charts" name="charts" border="0" onMouseOver="window.document.charts.src = '/layout/btn_charts_on.png';" onMouseOut="window.document.charts.src = '/layout/btn_charts.png';"/>
</a>

Javascript

$(document).ready(function () {
    $('img.menu_class').click(function () {
    $('ul.the_menu').slideToggle('medium');
    });
});

CSS

ul{
	position:relative;
	z-index:1100;
}
ul, li {
    margin:0;
    padding:0;
    list-style:none;
}
.the_menu {
    display:none;
    width:200px;
    border: 1px solid #1c1c1c;
}
.the_menu li {
    background-color: #000;
}
.the_menu li a {
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    display:block;
}
 
.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #808DEE;
}

[prestashoptarkar]

try to remove display:block from the_menu li a, i think it has to work

[Diki]

At 3 hours ago, prestashoptarkar wrote: try to remove display:block from the_menu li a, i think it has to work

li containers have the CSS property display:block by default, and the anchor container is the only thing inside of the li, so this won't change anything.
That and it is the unordered list container that is pushing the content down, not the li container.

If I understand your problem correctly: you want to have an unordered list function the same way a select container would. Specifically: it will open up "above" any content, and not interfere with its position.
To do this you only need to change this:

ul{
	position:relative;
	z-index:1100;
}

To this:

ul{
	position:absolute;
	z-index:1100;
}

Using a position of relative is not compatible with what you are trying to do (so far as I know, at least).

Doing so should achieve the result you desire.
Example: http://indie-dev.net/ng2/