...

View Full Version : Stop submenus from dropping into text?



EdNerd
10-25-2010, 10:53 PM
Following some examples I found on the 'net, I put together a CSS-based horizontal drop-down menu. It works well for me.

Except that when I mouse over the main heading and the submenu drops down, it goes right over the text.

If I don't want this to happen, then I can:
-- set a blank space between the menu and the <body> big enough to contain all of my drop-down submenus, or
-- somehow code it so a div or such expands to contain the submenus as they show, which means my page content bounces up and down

I don't like the idea of a large blank space, but I don't like the idea of a bouncing body either. (Plus I don't know how to code that - blank space is easy!)

Or -- should I not worry about it, because if they're navigating the menus they aren't reading the body text?

Here's my working page:
www.edandhismagic.net/DropMenu.htm

(NOTE: My free web host puts a banner ad that wasn't there when I built the page. But the submenus still drop down over the banner, which is the effect I want to stop. When I put the page on my paid host site, there's no banner - but then the submenus are dropping down over my body text and images.)

Ed

wojo1086
10-26-2010, 01:04 AM
To be honest, the submenu usually covers a little of your body. If you didn't want it to, then you could position your body lower on the page so the submenu doesn't drop over it. Also, you control where the submenu appears when the menu option is hovered. You could position the submenu up a little. I believe this is done in CSS by affecting this selector:
ul li:hover ul. Just reposition it just like anything else.

EdNerd
10-26-2010, 03:37 AM
I also just noticed that the Blog link - the only one that should actually work at the moment - opens a page with a very wrong URL!??!!

In the page code, I have


<li><a href="www.familyfunmagic.com/blog/index.php"
title="Special deals, public shows, and updates">
The FFM Blog</a></li>


But when I click the link, the address in the browser window is:
"http://www.edandhismagic.net/www.familyfunmagic.com/blog/index.php"

Why is that trying to append to the host url, and not trying to stand alone?

Ed

wojo1086
10-26-2010, 03:40 AM
As of right now, your submenus don't work. I'm using Firefox and nothing shows up when I hover over your links.

wojo1086
10-26-2010, 03:51 AM
Also, the href is saying the file you want is in the www.familyfunmagic.com/blog folder. I'm assuming you don't have a folder entitled www.familyfunmagic.com. take that out. Now, the href will say the file index.php is in the "blog" folder.

Like this:


<li><a href="blog/index.php"
title="Special deals, public shows, and updates">
The FFM Blog</a></li>

DrDOS
10-26-2010, 04:07 AM
You have to use either this:
http://www.familyfunmagic.com/blog/index.php
or this:
blog/index.php
as the URL. One is the full path, the other is the relative path. You can actually omit the index.php as the server will by default serve that.

blog/
should actually work just fine.I don't get the menus to work at all in Firefox on Linux. Dropdown menus are designed to drop down over whatever content is beneath them.

Here's one that I wrote.

http://ronbeau.50webs.com/Latest/snapshow.html

EdNerd
10-26-2010, 06:11 AM
You have to use either this:
http://www.familyfunmagic.com/blog/index.php
or this:
blog/index.php
as the URL. One is the full path, the other is the relative path. You can actually omit the index.php as the server will by default serve that.

blog/
should actually work just fine.I don't get the menus to work at all in Firefox on Linux. Dropdown menus are designed to drop down over whatever content is beneath them.

Here's one that I wrote.

http://ronbeau.50webs.com/Latest/snapshow.html

Thanks for the tips on the urls.

Love the menu - even works on mobile! May I steal the code, please?

Ed

DrDOS
10-26-2010, 12:03 PM
Thanks for the tips on the urls.

Love the menu - even works on mobile! May I steal the code, please?

EdYes, you certainly may.

EdNerd
10-26-2010, 03:50 PM
Yes, you certainly may.

Hmm - your source code looks like you're referencing some external javascripts - yes?

I wanted to try and stay away from JS, sticking with CSS (maybe php if I have to). I just didn't want to have to rely on the client having JS enabled.

Any possibilities of getting this CSS to work in FireFox?
Ed

SB65
10-26-2010, 03:57 PM
The problem is with your html. The dropdown ul should be nested within its parent li. For example this:


<li title="Schedule your Family Fun Magic show here"><i>GET MAGIC</i></li>
<ul class="dropdown">
<li><a href="www.familyfunmagic.com/OrderForm.htm"
title="Start here to order your show">
Order Form</a></li>
<li><a href="www.familyfunmagic.com/MyDates.htm"
title="Here's a list of available dates">
List of Dates</a></li>

<li><a href="www.familyfunmagic.com/Payment.htm"
title="Go here to complete your payment">
Payments</a></li>
</ul>


should be:


<li title="Schedule your Family Fun Magic show here"><i>GET MAGIC</i>
<ul class="dropdown">
<li><a href="www.familyfunmagic.com/OrderForm.htm"
title="Start here to order your show">
Order Form</a></li>
<li><a href="www.familyfunmagic.com/MyDates.htm"
title="Here's a list of available dates">
List of Dates</a></li>

<li><a href="www.familyfunmagic.com/Payment.htm"
title="Go here to complete your payment">
Payments</a></li>
</ul></li>

EdNerd
10-26-2010, 08:02 PM
Well, yeah - that makes sense!!
I won't be able to fix and check until later.
But I'll say "Thank you!!" now!

Cheers!
Ed

Addendum:
Yes!! That did fix it!!
Many thanks!!

Any idea why the top level won't wshow the bottom border when moused over?

dome90uk
10-27-2010, 06:03 PM
FYI - drop downs not working in FF 3.6.11



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum