CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
        
</head>
    
<body>
    
<div class="">
    <div id="wrap">
        <div id="container">
            <div id="menu-lateral">
                <div class="wrap">

                    <ul>
                        <li class=""><a href="">Home</a></li>
                        <li class=""><a href="">Serviços</a></li>
                        <li class="menu">
                            <a href="">Descobrindo a Itália</a>
                            
                            <div class="chat-bubble">
                                <ul id="city" class="submenu">
                                    <h2>CIDADES</h2>
                                            <li>
                                                <a href="">Teste City 1</a>
                                            </li>
                                </ul>
                                
                                <ul id="regions" class="submenu">
                                    <h2>REGIÕES</h2>
                                    
                                            <li>
                                                <a href="">Test Region 1</a>
                                            </li>
                                </ul>
                                <div class="chat-bubble-arrow-border"></div>
                                <div class="chat-bubble-arrow"></div>
                            </div>
                        </li>
                        <li class="menu">
                            <a href="#">Agenda</a>
                            
                            <div class="chat-bubble-agenda">
                                <ul>
                                    
                                            <li>
                                                <a href="">Test 1</a>
                                            </li>
                                </ul>
                                <div class="chat-bubble-agenda-arrow-border"></div>
                                <div class="chat-bubble-agenda-arrow"></div>
                            </div>
                            
                        </li>
                        <li class=""><a href="">Curiosidades</a></li>
                        <li class=""><a href="">Contato</a></li>
                    </ul>
                </div>
            </div>
        </div>
            
          
!

CSS

            
              * { font-family: Georgia, Arial, Tahoma; }
html { height: 100%; min-height: 100%; }
body { background: #ccc; height: 100%; min-height: 100%; position: relative; z-index: -9; }

img { border: 3px solid #030000; }
#slider img { border: 0; }
.orbit-wrapper { z-index: -1 !important; }

#wrap { float: left; width: 940px; min-height: 100%; }
.div { border: 5px solid #000; }
    div#menu-lateral {
        background: #fff;
        height: 100%;
        padding: 20px 0;
        position: fixed;
        width: 280px;
    }
        div#menu-lateral .wrap {
            margin: 0 auto;
            width: 220px;
        }
        div#menu-lateral a span.logo {
            background: url('../img/logo.png') no-repeat;
            display: inline-block;
            height: 220px;
            margin-bottom: 20px;
            width: 220px;
        }
        div#menu-lateral ul, div#menu-lateral form.busca, div#menu-lateral address {
            border-top: 1px solid #c8c8c8;
            margin: 0 auto;
            padding: 15px 0;
            width: 190px;
        }
            div#menu-lateral ul li, div#menu-lateral form.busca label {
                font-size: 15px;
                line-height: 24px;
                text-transform: uppercase;
            }
            div#menu-lateral ul li.active {
                border-left: -9999px solid #ccc;
            }
                div#menu-lateral ul li a {
                    color: #1e1e1e;
                }
                div#menu-lateral ul li.active a {
                    color: #960000;
                }

        div#menu-lateral form {overflow: hidden;}
            div#menu-lateral form.busca label {
                display: block;
                margin-bottom: 10px;
            }
            div#menu-lateral form.busca input[type="text"] {
                background: #f0f0f0;
                border: 1px solid #dcdcdc;
                border-right: 0;
                border-radius: 50px 0 0 50px;
                float: left;
                margin: 0;
                height: 26px;
                padding: 1px 10px;
            }
            div#menu-lateral form.busca input[type="submit"] {
                background: url('../img/botao-buscar.png') no-repeat;
                border: 0;
                cursor: pointer;
                float: left;
                height: 30px;
                width: 34px;
            }
        div#menu-lateral address {
            color: #c8c8c8;
            font-size: 12px;
            line-height: 18px;
        }
        div#menu-lateral .social {
            background: url('../img/redes-sociais.png') no-repeat;
            float: left;
            margin-left: 5px;
            height: 16px;
        }
            div#menu-lateral .social.facebook {
                background-position: -0px -0px;
                margin-left: 15px;
                width: 16px;
            }
            div#menu-lateral .social.twitter {
                background-position: -16px -0px;
                width: 19px;
            }
            div#menu-lateral .social.youtube {
                background-position: -35px -0px;
                width: 16px;
            }
        
            .bg {
                display: inline-block;
                min-height: 100%;
                width: 100%;
            }
            
            .shadow {
                background: url('../img/fundo-repeat.png') repeat;
                position: absolute;
                z-index: 0;
            }
            
            
    div#conteudo {
        float: left;
        margin-left: 285px;
        height: 100%;
    }
        div#conteudo h1 {
            border-bottom: 1px solid #000;
            color: #000;
            font-size: 18px;
            font-style: italic;
            margin: 20px 15px 0 15px;
            text-transform: uppercase;
            padding-bottom: 5px;
            width: 620px;
        }
        div#conteudo p {
            font-size: 15px;
            margin: 15px;
            text-align: justify;
            width: 620px;
        }
        
    div#home {
        float: left;
        margin-left: 285px;
        height: 100%;
    }
        
        #slider {margin: 15px;}
        
.iframe { 
    overflow: hidden;
}

.iframe iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 82.5%;
    height: 100%;
    z-index: -1;
}

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: 40px;
  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:60px;
  left:-22px;
}
.chat-bubble-arrow {
  border-color: transparent #FFF transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:60px;
  left:-19px;
}

/* AGENDA */
.chat-bubble-agenda {
  background-color: #FFF;
  border:2px solid #dcdcdc;
  font-size:35px;
  line-height:1.3em;
  left: -4000px; z-index: 100;  
  top: 95px;
  position:absolute;
  text-align:center;
  width: 280px;
}   

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

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

.home { width: 620px; height: 180px; background: url( ../img/home.png ) repeat-x; top: 260px; padding: 0; position: relative; left: -4px; z-index: -1; }
    .home p { color: #FFF; padding: 20px 0 0 0; max-width: 580px; }
    

.contato { float: left; }
    .contato label { float: left; width: 100%; margin: 10px 0 0 14px; font-size: 12px; font-weight: bold; }
    .contato input[type="text"] { border: 1px solid #CCC; width: 588px; padding: 15px; margin: 5px 0 0 14px; }
    .contato .button { border: none; float: right; margin: 10px 21px 0 0; background: url( ../img/button.png ) no-repeat; width: 120px; height: 36px; color: #FFF; }
    
.mensagem { float: left; width: 600px; margin: 20px 15px; color: #FFF; background: #B55D5C; padding: 10px; }

.busca-resultado { float: left; }
    .busca-resultado h2 { float: left; font-size: 18px; margin: 40px 0 10px 30px; width: 100%; }
    .busca-resultado li { float: left; margin: 0 0 0 60px; width: 575px; font-size: 12px; border-bottom: 1px solid #B7B7B7; padding: 10px 0; }
        .busca-resultado li h3 { font-size: 16px; float: left; margin: 6px 0; width: 575px; color: #00783C; } 
        .busca-resultado li h4 { font-size: 14px; float: left; margin: 0 10px; width: 575px; color: #960000; font-weight: normal; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $( function() {
  
  $( ".menu" ).hover( function( e ) {
    
    $( this ).find( "div" ).addClass( "div" );
    
  } );
  
  $( ".chat-bubble" ).mouseleave( function( e ) {
    
    $( this ).removeClass( "div" );
    
  } );
  
} );
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................