Help with Drop-Down Menu

[Brodzko]

Hello there,

would anyone please have a look at my new website-in-progress http://brodzko.cicolina.org/newbrodzko/home ? I am having troubles with the drop-down menu. Don't get freaky, the inline CSS is used only because of the demonstration and I haven't worked on it too much yet.

What bothers me is this problem: (bordered red) The whole menu is coded via separate <dl>s. In the red bordered one there's also a relative positioned <ul> containing the submenu, which is hidden defaultly. Now when you hover the 'Services' link, the menu shows up exactly as it should - and you can see also the border changes, so the <dl> itself is 'bigger'.

I was supposing that using this, setting an 'onmouseout' event would be effective enough to hide the submenu exactly when necessary and thus make the whole thing behave accordingly. Apparently, I was wrong. JavaScript behaves as if the <dl>'s height was the same as before (or not even that, something BETWEEN his original height and the new one.

I think this: The problem is, that the submenu is relatively positioned outside the mainmenu nav, even outside the header (not semantically, but it displays that way). Thus, when you move your cursor out of the header's area, JS automatically supposes that you're also out of the <dl>'s area and hides the submenu.

However, I am not sure whether I'm right or not, and am far away from solving it. So please, any advices how to modify the HTML code or how to make the script work like this?

Thank you guys!

 

[Phreaddee]

I cant say i've ever built a "drop down" with definition lists.
nested ul's always seem to work for me. (for Example)

<ul id="navigation">
<li><a href="#">menu 1</a>
<ul class="sub">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
</li>
<li><a href="#">menu 2</a>
<ul class="sub">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul></li>
<li><a href="#">menu 3</a>
<ul class="sub">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul></li>
<li><a href="#">menu 4</a>
<ul class="sub">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul></li>
</ul>

 

[Brodzko]

With nested <ul>s I had the same problem. And the main menu is coded via <dl> because of the 'explanation' in english under the link in my native language

 

[Brodzko]

Hey,

for now I coded the menu using just CSS hover effects and overflow: hidden;.

BUT - it's still not working. I'd love to understand, WHY the hover effect disappears after I move my cursor over the <hr> in the header - when I'm obviously STILL INSIDE the red border?

This confuses me a lot - probably a lecture of HTML/CSS I missed. Why can't I make it behave like I want to? It acts like I wasn't over the <dl> anymore, once I'm not over header... makes sense, because the <dl> is inside the header, but since the <dl> has a red border, I assume I'm over it while I'm inside the border.. Do you know what I mean?

 

[chrishirst]

Why do you have the <hr> elements? Just giving the <li> a bottom border would serve the same purpose.

And what browser(s) are you having problems with?

 

[Brodzko]

Sorry, forgot to add and close the topic - I solved the problem with pure CSS this morning, no more problems anymore