CSS Dropdown menu not working in Safari/Chrome

[hrrubin]

http://hrrubin.dk/
I have a troublesome dropdown menu, consisting of css.
Need a suggestion to what is wrong. Validating the site didn´t help.

Site is working in: firefox, ie and opera

[jedaisoul]

You really have to give better info than that. If you cannot be bothered to copy and paste the relevant code from your site, why, and how, do you expect anyone to help you?

[hrrubin]

You are right of course:
I have three stylesheets that control the dropdown. It was a pre-made code i downloaded and then tried to compress into one css file without succes.

CSS: dropdown.linear.css
ul.dropdown-linear {
width: auto;
}

ul.dropdown-linear ul li {
float: left;
}

ul.dropdown-linear li.hover,
ul.dropdown-linear li:hover {
position: static;
}

ul.dropdown-linear ul ul {
display: none !important;
}

dropdown.css
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
margin-left:40px;
margin-top:30px;
}

ul.dropdown li {
float: left;
line-height: 2.5em;
vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left:0;
z-index: 598;
width: auto;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

default.linear.css
ul.dropdown {

font-family: 'BookmanOldStyleBold';
font-size:1em;
font-weight:normal;
text-decoration:none !important;
display:block;
line-height:2.5em;
width:960px;
}

ul.dropdown li {
padding-left:30px;
padding-right:30px;
}

ul.dropdown li:hover,
ul.dropdown li:hover {
height:2.5em;
display:block;
width:auto;
background-color:#000;
}

ul.dropdown ul {
width: auto;
background-color:#000;
}

ul.dropdown ul li {
}

ul.dropdown ul li.hover {
margin: 0;

[jedaisoul]

This is just the CSS definitions of the layout. I would need an example of the list code in the html file to make sense of it. Unfortunately, I cannot assist further than that. I would have thought that would be documented where you got the CSS from. Also, I would suspect that you need separate CSS files, but without the code, I'm not certain of that.

I hope that helps...

[jedaisoul]

Ok, I've worked through it, and you simply cannot do this with CSS. It has to be done in JavaScript, or a similar programming language. Here is an example:

1. Set up a simple two level unordered list in HTML:

<ul>
<li>opt 1
<ul id="ddrop1">
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul></li>
<li>opt 2
<ul id="ddrop2">
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul></li>
<li>opt 3
<ul id="ddrop3">
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul></li>
</ul>

2. Add CSS code to make the second level entries disappear:

#ddrop1,
#ddrop2,
#ddrop3 {
display: none;
}

3. Add JavaScript functions in the HTML header:

<script type="text/javascript">
function dispblock(x) {
document.getElementById(x).style.display="block";
}
function dispnone(x) {
document.getElementById(x).style.display="none";
}
</script>

4. Amend the first level list entries to call the JavaScript:

<ul>
<li onmouseover='dispblock("ddrop1")' onmouseout='dispnone("ddrop1")'>opt 1
<ul id="ddrop1">
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul></li>
<li onmouseover='dispblock("ddrop2")' onmouseout='dispnone("ddrop2")'>opt 2
<ul id="ddrop2">
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul></li>
<li onmouseover='dispblock("ddrop3")' onmouseout='dispnone("ddrop3")'>opt 3
<ul id="ddrop3">
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul></li>
</ul>

I suggest you crate a test page using this code EXACTLY, so you can see how it works. Then incorporate it in your own site.

[hrrubin]

Thank you, this will help.

[jedaisoul]

The example I've given works, but jumps about because the second level entries are interspersed between the first level ons. You really want to segregate them. Only I found that just linking the first level entries to the javascript does not work well like that. The problem is that you have to link the first level entries to make the second level appear, but as you mouse off the first level to the second, the entries disappear! The solution I've found is to link the second level as well. So the HTML code becomes:

<div id="menu1">
<ul>
<li onmouseover='dispblock("ddrop1")' onmouseout='dispnone("ddrop1")'>opt 1</li>
<li onmouseover='dispblock("ddrop2")' onmouseout='dispnone("ddrop2")'>opt 2</li>
<li onmouseover='dispblock("ddrop3")' onmouseout='dispnone("ddrop3")'>opt 3</li>
</ul>
</div>
<div id="menu2_1">
<ul id="ddrop1" onmouseover='dispblock("ddrop1")' onmouseout='dispnone("ddrop1")'>
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul>
</div>
<div id="menu2_2">
<ul id="ddrop2" onmouseover='dispblock("ddrop2")' onmouseout='dispnone("ddrop2")'>
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul>
</div>
<div id="menu2_3">
<ul id="ddrop3" onmouseover='dispblock("ddrop3")' onmouseout='dispnone("ddrop3")'>
<li>opt a</li>
<li>opt b</li>
<li>opt c</li>
</ul>
</div>

And the CSS code is:

#ddrop1,
#ddrop2,
#ddrop3 {
display: none;
}
#menu1 {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
z-index: 2;
}
#menu2_1 {
position: absolute;
left: 60px;
top: 0px;
width: 80px;
z-index: 3;
}
#menu2_2 {
position: absolute;
left: 60px;
top: 20px;
width: 80px;
z-index: 3;
}
#menu2_3 {
position: absolute;
left: 60px;
top: 40px;
width: 80px;
z-index: 3;
}

The JavaScript functions in the HTML header are unchanged:

<script type="text/javascript">
function dispblock(x) {
document.getElementById(x).style.display="block";
}
function dispnone(x) {
document.getElementById(x).style.display="none";
}
</script>

[TheAliveWinner]

...has to be done in JavaScript, or a similar programming language.

Dear, JavaScript is NOT a programming language!
It is just a client-side scripting language!

[jedaisoul]

Dear, JavaScript is NOT a programming language!
It is just a client-side scripting language!

I think that comment is not helpful. A client-side scripting language IS a programming language. By the way, I've written extensive code (in the past) in MSDOS batch language TSX script and a little in VAX and Alpha script. Client-side scripting languages are almost as old as digital computing itself.

[hrrubin]

It would seem I can't find out how to make this menu horizontal. The usual way is not working, so I'm not making the right path - or is javascript preventing me somehow?