Problems with submenu vertical

[gremio10]

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… =/

• Home
• Services
• Discover

  • City 1
  • City 2
  • City 3
  • City 4
  • City 5

  • Region 1
  • Region 2
  • Region 3
  • Region 4
  • Region 5

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 !

[Paulie_D]

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.

[gremio10]

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”)

[Author]

Posts