...

View Full Version : Navigation bar(dropdown) not working correctly?



ziggynerja
10-26-2011, 11:25 PM
The navigation bar was working fine before I added the background behind it.

http://essentialgroup.info/Memberarea.php

As you hover over one of the buttons, the drop down will appear detached from the menu, to the right.

I'm guessing I screwed the CSS up somewhere as I was messing with the background.

Hoping someone can shed some light on this, spent 2 days looking at this and its been driving me nuts.

If anymore info is required let me know.

Thank you!:thumbsup:

Frankie
10-27-2011, 02:58 AM
The navigation bar was working fine before I added the background behind it.

I'd be surprised, because the way to make a drop-down menu is with a nested list. Your menu is far from that. Here's how to do it: Create a Drop-down/Fly-out Menu with CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-make-a-menu-with-css.php).

ziggynerja
10-27-2011, 03:01 AM
I'd be surprised, because the way to make a drop-down menu is with a nested list. Your menu is far from that. Here's how to do it: Create a Drop-down/Fly-out Menu with CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-make-a-menu-with-css.php).

Thanks for the link, will check it out :thumbsup:

But the navigation was working perfect before. Here is another site i put it onto yesterday, without the image I mentioned: http://how2dev.net/IndexTemp.html

Frankie
10-27-2011, 03:16 AM
Here is another site i put it onto yesterday, without the image I mentioned: http://how2dev.net/IndexTemp.html
I see: a heavily Javascript-driven menu, that's how that works. But you don't need that -- with just one very short script to get it working in IE6, you can have a much (c)leaner menu.

ziggynerja
10-27-2011, 10:40 AM
Been playing around with this menu you linked now, would you be able to give me a little help getting this menu to look the same as this menu? Not having much luck with these menu's. All i want is the background the same, the dropdown style ill figure out later.

Old: http://www.essentialgroup.info/Memberarea.php

new:


#navDiv ul {
list-style-type: none;
margin: 0;

padding: 0px;


}
#navDiv ul ul {
left: 0;
}
#navDiv ul li {
float: left;
background: url(http://www.essentialgroup.info/chrometheme/chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
width: 120px;
position: relative;
}
#navDiv ul ul {
display: none
}
#navDiv ul li:hover ul,
#navDiv ul li.jsHover ul {
display: block;
position: absolute;
}
#navDiv a {
display: block;
padding: 0 5px 0 5px;
width: 110px; /* for IE6; <li> width minus padding and border */
background: white;
color: blue;
text-decoration: none;
}
#navDiv a:hover {
background: blue;
color: white;
}


<div id="navDiv">
<ul>
<li><a href="#">Hyperlink 1</a></li>
<li onmouseover="this.className+=' jsHover'" onmouseout="this.className=this.className.replace(' jsHover','')"><a href="#">Hyperlink 2 &darr;</a>
<ul>
<li><a href="#">Hyperlink 2-A</a></li>
<li><a href="#">Hyperlink 2-B</a></li>
<li><a href="#">Hyperlink 2-C</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
</ul>
</div>

Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum