Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Stop submenus from dropping into text?

    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
    Last edited by EdNerd; 10-25-2010 at 09:56 PM. Reason: Clarify

  • #2
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    154
    Thanks
    2
    Thanked 8 Times in 8 Posts
    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:
    Code:
    ul li:hover ul
    . Just reposition it just like anything else.

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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
    Last edited by EdNerd; 10-26-2010 at 02:39 AM. Reason: bad code tags

  • #4
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    154
    Thanks
    2
    Thanked 8 Times in 8 Posts
    As of right now, your submenus don't work. I'm using Firefox and nothing shows up when I hover over your links.

  • #5
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    154
    Thanks
    2
    Thanked 8 Times in 8 Posts
    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:

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

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Code:
    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

  • #7
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Code:
    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

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by EdNerd View Post
    Thanks for the tips on the urls.

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

    Ed
    Yes, you certainly may.

  • #9
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    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

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The problem is with your html. The dropdown ul should be nested within its parent li. For example this:

    Code:
    <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:

    Code:
    <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> 
    Last edited by SB65; 10-26-2010 at 03:04 PM.

  • #11
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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?
    Last edited by EdNerd; 10-27-2010 at 02:49 PM.

  • #12
    New Coder
    Join Date
    Feb 2008
    Posts
    64
    Thanks
    3
    Thanked 6 Times in 6 Posts
    FYI - drop downs not working in FF 3.6.11


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •