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

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li class="menu">
      <a href="#">Discover</a>

      <div class="chat-bubble">
        <ul id="city">
          <li><a href="">City 1</a></li>
          <li><a href="">City 2</a></li>
          <li><a href="">City 3</a></li>
          <li><a href="">City 4</a></li>
          <li><a href="">City 5</a></li>
        </ul>

        <ul id="regions">
          <li><a href="">Region 1</a></li>
          <li><a href="">Region 2</a></li>
          <li><a href="">Region 3</a></li>
          <li><a href="">Region 4</a></li>
          <li><a href="">Region 5</a></li>
        </ul>
        <div class="chat-bubble-arrow-border"></div>
        <div class="chat-bubble-arrow"></div>
      </div>
    </li>
  </ul>

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 !