Be a Supporter!

Css & Jquery Drop Down Menu

  • 890 Views
  • 2 Replies
New Topic Respond to this Topic
Fallin-Again
Fallin-Again
  • Member since: Aug. 24, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Css & Jquery Drop Down Menu 2012-02-23 19:53:47 Reply

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;
}

yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea yea

prestashoptarkar
prestashoptarkar
  • Member since: Nov. 11, 2011
  • Offline.
Forum Stats
Member
Level 01
Programmer
Response to Css & Jquery Drop Down Menu 2012-02-28 11:44:05 Reply

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

Diki
Diki
  • Member since: Jan. 31, 2004
  • Offline.
Forum Stats
Moderator
Level 13
Programmer
Response to Css & Jquery Drop Down Menu 2012-02-28 15:04:09 Reply

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/