473,326 Members | 2,732 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Drop Down Menu Issue

I'm not really sure if this is a CSS issue, but people here before have
been knowledgeable and friendly and so it seems like a good place to
start.

I'm in the process of building a new site for a band that I am working
for, the demo is up at http://newsite.projectcircle3.com

You should be able to hover over the word 'band' in the navigation and
a dropdown menu appears. It is working in FF and Opera but not in IE 6
for some reason.

I have used this script before on another site and it worked fine in
all browsers. Must be missing something really obvious...

Many thanks in advance

Lewis

HTML Snippet:

<div id="navigation" class="nav">
<ul>
<li>
<a href = "/">Home</a></li>
<li>
<a href = "/news">News</a></li>
<li>
<ul>

<li><a class = "top" href ="/bio">biography</a></li>
<li><a href =
"http://www.myspace.com/projectcircle3">mySpace</a>
<li><a href = "/mp3s">MP3s</a>
<li><a href = "/comingsoon">shop</a>
</ul>
<a href = "/bio">Band</a></li>

<li>
<a href = "/journal">Journal</a></li>
<li>
<a href =
"http://www.projectcircle3.com/pictures">Pictures</a></li>
<li>
<a href =
"http://www.forum.projectcircle3.com/">Forum</a></li>
<li>

<a href = "/armyofangels">Army of Angels</a></li>
<li>
<a href = "/contact">Contact Us</a></li>
</ul>
</div>

CSS Snippet:

/*******************
Drop Down Nav
*/
div.nav li ul { /* second-level lists */
display: block;
position: absolute;
margin: 0;
padding: 0;
width: 7em;
left: -999em;
}

div.nav li ul li /* drop down list items */
{
display: block;
margin: 0;
padding: 0;
width: 7em;
/* border-bottom: 1px solid #3D3686;*/
/*background-color: #1E203C; /* 0678B3 */
}

div.nav li ul a /*drop down links*/
{
display: block;
text-align: left;
width: 7em;
padding: 0.3em 0.5em;
margin: -7px 0;}

div.nav li ul a.top {
margin: 2px 0 -7px;
}

div.nav li:hover ul, div.nav li.hover ul { /* lists nested under
hovered list items */
left: auto;}

Javascript code:

sHover = function()
{
var sEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sEls.length; i++)
{
sEls[i].onmouseover=function()
{
this.className+=" hover";
}
sEls[i].onmouseout=function()
{
this.className=this.className.replace(/hover/, "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sHover);

Jul 12 '06 #1
3 1860
That's a suckerfish drop down, correct?

Assuming it is, your JavaScript might need to be formatted in a
specific way:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"),
"");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Notice the interesting commenting. You might have to make this inline
for it to work -- I haven't figured out how to make it linked and
include the commenting. Also notice that there are TWO spots in the
JavaScript where you must replace sfhover with your own class name if
you're not using sfHover.

Hope this helps.

- Bethany
le***********@googlemail.com wrote:
I'm not really sure if this is a CSS issue, but people here before have
been knowledgeable and friendly and so it seems like a good place to
start.

I'm in the process of building a new site for a band that I am working
for, the demo is up at http://newsite.projectcircle3.com

You should be able to hover over the word 'band' in the navigation and
a dropdown menu appears. It is working in FF and Opera but not in IE 6
for some reason.

I have used this script before on another site and it worked fine in
all browsers. Must be missing something really obvious...

Many thanks in advance

Lewis

HTML Snippet:

<div id="navigation" class="nav">
<ul>
<li>
<a href = "/">Home</a></li>
<li>
<a href = "/news">News</a></li>
<li>
<ul>

<li><a class = "top" href ="/bio">biography</a></li>
<li><a href =
"http://www.myspace.com/projectcircle3">mySpace</a>
<li><a href = "/mp3s">MP3s</a>
<li><a href = "/comingsoon">shop</a>
</ul>
<a href = "/bio">Band</a></li>

<li>
<a href = "/journal">Journal</a></li>
<li>
<a href =
"http://www.projectcircle3.com/pictures">Pictures</a></li>
<li>
<a href =
"http://www.forum.projectcircle3.com/">Forum</a></li>
<li>

<a href = "/armyofangels">Army of Angels</a></li>
<li>
<a href = "/contact">Contact Us</a></li>
</ul>
</div>

CSS Snippet:

/*******************
Drop Down Nav
*/
div.nav li ul { /* second-level lists */
display: block;
position: absolute;
margin: 0;
padding: 0;
width: 7em;
left: -999em;
}

div.nav li ul li /* drop down list items */
{
display: block;
margin: 0;
padding: 0;
width: 7em;
/* border-bottom: 1px solid #3D3686;*/
/*background-color: #1E203C; /* 0678B3 */
}

div.nav li ul a /*drop down links*/
{
display: block;
text-align: left;
width: 7em;
padding: 0.3em 0.5em;
margin: -7px 0;}

div.nav li ul a.top {
margin: 2px 0 -7px;
}

div.nav li:hover ul, div.nav li.hover ul { /* lists nested under
hovered list items */
left: auto;}

Javascript code:

sHover = function()
{
var sEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sEls.length; i++)
{
sEls[i].onmouseover=function()
{
this.className+=" hover";
}
sEls[i].onmouseout=function()
{
this.className=this.className.replace(/hover/, "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sHover);
Jul 12 '06 #2

just check this line again as well? I believe there is a <li>
missing from the 'band' href:
<a href = "/bio">Band</a></li>
Jul 12 '06 #3
Hey guys

Thanks for your help, really appreciated. You were right I was using
the Suckerfish menu, having read up about it I feel a lot more
comfortable with it.

In the end the problem was the Id of my navigtion bar was 'navigation'
and not 'nav' as the javascript expected. DOH!

Also, it seems to work without the comments that were suggested, and as
an include file.

See http://newsite.projectcircle3.com (or shortly
www.projectcircle3.com) for working example.

Thanks again guys,

Lewis

Jul 13 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: KK | last post by:
Drop-down menus are the hottest thing since Wonder Bread but . . . 1. Alot of people put them in the they-look-nice-but-you-cant-code-them-right-so-they-always-look-messed-up category (a la...
0
by: vikram.cvk | last post by:
Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview
4
by: simon.cigoj | last post by:
I have an javascript made menu and some forms with the dropdown element. When the menu opens and scrolls down the drop down is displeyed over the menu and obscures the menu choices. I have this...
3
by: Reb | last post by:
Hi, I am using drop down menu in my pages. In one of my page,there is a listbox control below the menu. This listbox control is hiding the drop down menu items. How can i make the drop down...
2
by: Rosanne | last post by:
I have a menu written in javascript. I include that menu on an asp page. The aspx page contains both a listbox and a datagrid. There i one drop down menu that overlaps the place where the...
1
by: phpnewb | last post by:
Hi, I know i'm doing it wrong, but I'm using a while loop right now to create several instances of a drop down menu. It gives me undesirable results. Can you tell me the right way to do it. Below are...
4
by: TycoonUK | last post by:
Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...
1
by: Ivann | last post by:
Hi All, I have a javascript/css menut that i have which i start when the html page loads. <script type="text/javascript">cssdropdown.startchrome("chromemenu")</ script> ***THIS IS IN THE...
11
SHOverine
by: SHOverine | last post by:
I have an issue with a drop down menu that I am hoping you all can help me with. The issue is when I press "Submit", my code prints back values from a form I developed (eventually I will write them...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.