Problemas com submenu no IE

[gremio10 14]

Fala galera, como sempre o IE ferrando nossas vidas... ehehe !

 

Bom, eu tenho um menu, que alguns elementos possui submenu, e todas as verificações e etc são feitas diretamente no CSS, mas parece que o IE não entende isso.

 

CSS:

 

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

.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;
}

 

HTML:

 

<li class="<?php if( $m === "descobrindo" ) { echo "active"; } ?> menu">
                            <a href="<?php echo URLRAIZ; ?>descobrindo_italia.php">Descobrindo</a>
                            
                            <div class="chat-bubble">
                                <ul id="city" class="submenu">
                                    <h2>CIDADES</h2>
                                    <?php
                                        $modelCity = new City();
                                        
                                        $city = $modelCity->findByCategoryId( 1 );
                                        
                                        foreach( $city as $key => $val )
                                        {
                                    ?>
                                            <li>
                                                <img src="<?php echo URLIMG . "verde.jpg" ?>" />
                                                <a href="<?php echo URLRAIZ; ?>descobrindo.php?o=<?php echo $val[ "permalink" ] ?>"><?php echo $val[ "name" ] ?></a>
                                            </li>
                                    <?php
                                        }
                                    ?>
                                </ul>
                                
                                <ul id="regions" class="submenu">
                                    <h2>REGIÕES</h2>
                                    <?php
                                        $modelCity = new City();
                                        
                                        $city = $modelCity->findByCategoryId( 2 );
                                        
                                        foreach( $city as $key => $val )
                                        {
                                    ?>
                                            <li>
                                                <img src="<?php echo URLIMG . "vermelho.jpg" ?>" />
                                                <a href="<?php echo URLRAIZ; ?>descobrindo.php?o=<?php echo $val[ "permalink" ] ?>"><?php echo $val[ "name" ] ?></a>
                                            </li>
                                    <?php
                                        }
                                    ?>
                                </ul>
                                <div class="chat-bubble-arrow-border"></div>
                                <div class="chat-bubble-arrow"></div>
                            </div>
                        </li>

 

 

Obrigado !

[Marcos Xavier 189]

Dá uma olhada ae

http://www.cssplay.co.uk/menus/new-dropdown.html

 

 

Mais

https://www.google.com.br/search?q=menu+com+submenu+cross+browser&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:pt-BR:official&client=firefox-a'>Aqui

[gremio10 14]

Segue o código com o exemplo de erro no IE <= 9

 

http://codepen.io/anon/pen/umkif

[gremio10 14]

Resolvi o problema, era dois parametros no css que estavam bugando no ie