Grow your CSS skills. Land your dream job.

Problems with submenu vertical

  • # February 27, 2013 at 8:17 am

    Hello guys, I’ve been struggling with this code about a couple days and until know I can’t find the problem.

    In Chrome, this code works well as in Firefox, the only problem is the amazing IE… =/

    And the CSS is:

    li.menu:hover > div { left: 250px !important; display: block; }

    .chat-bubble {
    background-color: #FFF;
    border:2px solid #dcdcdc;
    font-size:35px;
    line-height:1.3em;
    left: -4000px;
    top: 250px;
    position:absolute;
    text-align:center;
    width: 385px;
    z-index: 20;
    }

    .chat-bubble ul h2 { font-size: 16px; text-align: left; }
    .chat-bubble ul#city h2 { color: #00783c; margin: 0 0 0 30px; }
    .chat-bubble ul#regions h2 { color: #960000; border-left: 1px solid #CCC; padding: 0 0 0 20px; }

    .chat-bubble ul#city { float: left; border: none; }
    .chat-bubble ul#city li { text-align: left; margin: 0 0 0 30px; }
    .chat-bubble ul#city li a { color: #000 !important; }
    .chat-bubble ul#city img { border: none; }

    .chat-bubble ul#regions { float: left; border: none; }
    .chat-bubble ul#regions li { text-align: left; border-left: 1px solid #CCC; padding: 0 0 0 20px; }
    .chat-bubble ul#regions li a { color: #000 !important; }
    .chat-bubble ul#regions img { border: none; }

    .chat-bubble-arrow-border {
    border-color: transparent #dcdcdc transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:174px;
    left:-22px;
    }
    .chat-bubble-arrow {
    border-color: transparent #FFF transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:174px;
    left:-19px;
    }

    The problem is: when I do the hover in LI element and I try to go inside the UL child, the hover is no more active, and my submenu go -4000px left, but in Chrome/Firefox I don’t have this problem.

    Thank you !

    # February 27, 2013 at 10:05 am

    I think we’d need to see a live site (do you have a link) or put something useful in Codepen

    This worries me….

    left: -4000px;

    I can’t think of any reason why this should be necessary.

    # February 27, 2013 at 12:38 pm

    I check a menu that has this

    left: -4000px;

    Since then I use this code.

    [http://codepen.io/anon/pen/umkif](http://codepen.io/anon/pen/umkif “http://codepen.io/anon/pen/umkif”)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".