SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opera hover menu problem

    Hi, I have a horizontal navigation bar that displays submenus when the top parts are hovered over. This works fine in Safari and Firefox, but in Opera, the submenu appears when I hover over the main nav bar, but disappears once I try to mouse down towards the submenu.

    My CSS looks like this:

    #nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #nav ul li {
    display: inline;
    position: relative;
    margin-left: -.5%;
    width: 125px;
    }
    li.headlink ul {
    display: none;
    }
    li.headlink:hover ul {
    width: 125px;
    display: block;
    position: absolute; top: 15px; left: 1px;
    }

    Is there anything I can do to fix this?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,827
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Can you give us a link to the page?

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    unfortunately not, it's on a password-protected university server at the moment.

    Is there any other information I can provide that would be helpful?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As I mentioned in your other thread the problem is 99% likely to be that your submenu is too faraway from the list trigger element.

    In the code above you have this.

    Code:
    #nav ul li {
    	display: inline;
    	position: relative;
    	margin-left: -.5%;
    	width: 125px;
    	}
    li.headlink ul {
    	display: none;
    	}
    li.headlink:hover ul { 
    	width: 125px;
    	display: block;
    	position: absolute; top: 15px; left: 1px;
    	}
    Firstly you have set the list to display:inline which means that dimensions will not be applied and the trigger area will only be the text area and current line-height which will vary between browsers.

    You should probably float the list so that the dimensions are applied and also float the anchor and give it some height to work with. That height will then be the top position for your submenu.

    If you don't want to give the menu a height then you can try top:auto on the submenu but IE usually gets that wrong and a specific height is always the best method.

    Without a working example it will be hard to be 100% accurate but I'm guessing that your problem is related to the above

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As I mentioned in your other thread the problem is 99% likely to be that your submenu is too faraway from the list trigger element.

    In the code above you have this.

    Code:
    #nav ul li {
    	display: inline;
    	position: relative;
    	margin-left: -.5%;
    	width: 125px;
    	}
    li.headlink ul {
    	display: none;
    	}
    li.headlink:hover ul { 
    	width: 125px;
    	display: block;
    	position: absolute; top: 15px; left: 1px;
    	}
    Firstly you have set the list to display:inline which means that dimensions will not be applied and the trigger area will only be the text area and current line-height which will vary between browsers.

    You should probably float the list so that the dimensions are applied and also float the anchor and give it some height to work with. That height will then be the top position for your submenu.

    If you don't want to give the menu a height then you can try top:auto on the submenu but IE usually gets that wrong and a specific height is always the best method.

    Without a working example it will be hard to be 100% accurate but I'm guessing that your problem is related to the above


    Yes, the menu does work when I use float, but I'd rather avoid using float, as that creates more serious positioning problems for the rest of the page content.
    And when I move the submenu items up, they only work when they all overlap the parent, which isn't the most aesthetically pleasing thing in the world :P

    But I'll work on it. Thanks so much for your help!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ThorPlusA View Post
    Yes, the menu does work when I use float, but I'd rather avoid using float, as that creates more serious positioning problems for the rest of the page content.
    There is no problem in using floats as long as you take care of them and clear them properly. As long as the parent ul is not floated the onther elements on the page will no nothing about the inner floated content. Just make sure that the parent contains the floats with the clearfix method.

    Note that Opera also has problems in placing absolute elements in respect of inline elements (and so does IE) so you really must use float (or display:inline-block - which needs hacks for ie6 and 7) to make this work cross browser.

    If you still must persevere with display:inline then at least set the line-height of the top level list items to a fixed pixel height - it may help. Remember though that vertical margins on inline elements have no effect and that vertical padding on inline elements just bleeds over the line height and has no effect on the flow - just one more reason why you need a float .

    And when I move the submenu items up, they only work when they all overlap the parent, which isn't the most aesthetically pleasing thing in the world :P
    But I'll work on it. Thanks so much for your help!
    There is no need to make them overlap. They just need to be adjoining and you can't make them adjoin properly unless the parent is a block box (which floats will create nicely). You can still create separation by adding padding-top to the submenu which creates the illusion of space while in fact still keeping contact.

    Drop downs are pretty straight forward but you must follow some logical rules and make sure everything lines up correctly and not leave anything to chance.

    If you want this fixed 100% then you'll need to create a version and put it online for us. It should then be quite easy to fix.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I should also point out that using display:none to hide the submenu is not the best method for accessibility. To hide the submenu simply move it offscreen and then bring it back again.

    e.g.

    to hide:
    Code:
    li.headlink ul {
    margin-left:-999em }
    and then to reveal:
    Code:
    li.headlink:hover ul { margin-left:0; }

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used float before and cleared them all using "clear: both;" for the subsequent divs, but I didn't use the clearfix method. Could you maybe explain how that works? I've never used that before.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ThorPlusA View Post
    I used float before and cleared them all using "clear: both;" for the subsequent divs, but I didn't use the clearfix method. Could you maybe explain how that works? I've never used that before.
    Sure

    Clear:both is used for clearing floats.

    That means that content will start below the floats because you have cleared them and is a pretty straight forward concept. What most people have trouble understanding is containing floats.

    When you float items inside a parent then floats are removed from the flow and if the parent only contains floats then it has no height and any borders or backgrounds on the parent container will not show at zero height.

    To contain floats you need to either add a clearing div before the closing div of the parent, use the overflow method to clear, or use the clearfix method.

    In a ul structure you cannot use a clearing div because you cannot insert a div before the closing ul as that is invalid.

    In your drop down example we can't apply overflow:hidden to the ul because that would hide the dropdowns and nothing would show.

    Therefore we are left with the clearing technique using the old clearfix method. You just add a calss of clearfix to the parent in question and any child floats will be contained.

    Here's an example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul#nav {
        margin:0;
        padding:0;
        list-style:none;
        border:5px solid red;
    }
    #nav li {
        float:left;
        width:100px;
        margin:0 10px 0 0;
        background:green;
    }
    /* clearfix routine */
    .clearfix:after {
        content:" ";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix {zoom:1.0}
    /* end clearfix*/
    </style>
    </head>
    <body>
    <ul id="nav" class="clearfix">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    </body>
    </html>
    Now try the above and remove the clearfix class to see the dramatic change in layout. All you need to do to clear floats is add that clearfix to the parent of the floats and they will be contained. The overflow method is neater because it uses no extra mark up but can't be used where you want visible overflow as in your case.

    You can read up on the original clearfix technique here.

    The overflow technique is mentioned in my reply in this old thread.

    Hope that explains it a little

  10. #10
    SitePoint Member
    Join Date
    May 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that makes sense, I'll try it


Tags for this Thread

Bookmarks

Posting Permissions

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