1

Tenho no site que estou fazendo um menu dropdown, meu problema é quando ativo o efeito hover passando o mouse no menu as imagens que estão ao lado acabando se movendo junto com o menu, como faço para posicionar o menu de uma forma que a imagem nao se mova ? O erro esta no menu dropdown embaixo do logo menu com titulo (departamentos) e na imagem que adicionei com titulo (banner-destaque)

<!Doctype html >
    <html>
        <head>
            <title> Mirror Fashion </title>
            <style>
                body {
                    color: #333333; 
                    font-family: "Lucida sans unicode", "Lucida Grande", sans-serif;
                    margin-bottom:0;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    margin: 0;
                }

                header {
                    position:relative;
                    top:-5px;
                    left:0;
                    right:0;
                }

                header img{
                    position:relative;
                    top:-6px;
                    left:0;
                    width:225x;
                    height:85px;
                }

                .menu-opções {
                    position:absolute;
                    line-height: 14px;
                    letter-spacing:0,7px;
                    top:55px;
                    right:0px;
                    bottom:0;
                }

                .menu-opções ul{
                    font-size:15px;
                }

                .menu-opções ul li{
                    margin-left: 12px;
                    display:inline;
                }

                .menu-opções a{
                    color:#003366;
                }


                .sacola {
                    float:right;
                    position:absolute;
                    top:12px;
                    right:32px;
                    bottom:0;
                    margin:0;
                    font-size: 14px;
                    line-height: 14px;
                    letter-spacing:0,1px;
                    padding:0;
                    text-align: right;
                    width:155px;
                }

                .sacola img {
                    position:relative;
                    float:right;
                    top:-10px;
                    margin-right:-32px;
                    width:27px;
                    height:36px;
                }

                .container {
                    margin: 0 auto;
                    width: 940px;
                    padding:0;
                }

                .Busca h2, .Busca form, .menu-departamentos h2 {
                    position:relative;
                    margin:0;
                    margin-left:10px;
                }

                .Busca, .menu-departamentos {
                    margin-top:-33px;
                    background-color: #DCDCDC;
                    font-weight:bold;
                    text-transform: uppercase;
                    margin-right: 0;
                    width: 230px;
                    font-size:12px;
                    float:  left;
                }

                .Busca input[type=search]   {
                    width: 170px;
                    border-radius:10px;
                    margin-bottom:10px;
                }

                .Busca button {
                    background-image: url(../img/busca.png);
                    background-repeat: no-repeat;
                    border:none;
                    margin-left:20px;
                    width:20px;
                    height:20px;
                }

                .menu-departamentos {
                    margin-top:20px;
                    padding-bottom: 10px;
                    clear:  left;
                }

                .menu-departamentos li  {
                    background-color:white;
                    margin-bottom: 1px;
                    padding: 5px 10px;
                    width:240px;
                    margin-left:-40px;
                    list-style:none;
                }

                .menu-departamentos li li a:before {
                    content: '\272A';
                    padding-right:0px;
                    margin:0;
                }

                .menu-departamentos li ul {
                    margin:0;
                    display:none;
                }

                .menu-departamentos li:hover ul {
                    display:block;
                    margin:0;
                }

                .menu-departamentos ul ul li {
                    display:block;
                    background-color:#DCDCDC;
                    width:200px;
                }

                .menu-departamentos a   {
                    color: #333333;
                    text-decoration:none;
                }

                .banner-destaque {
                    float:right;
                    widht:525px;
                    margin-right:-39px;
                    margin-top:-363px;
                }

                .painel {
                    width:445px;
                    margin:10px;
                    padding:10px;
                }

                .painel h2:before {
                    content:'\2756';
                    opacity:0.4;
                    padding-right:5px;
                }

                .painel li {
                    display:inline-block;
                    vertical-align:top;
                    width:140px;
                    margin:2px;
                    padding-bottom:10px;
                }

                .painel h2 {
                    font-size:24px;
                    font-weight:bold;
                    text-transform:uppercase;
                    margin-bottom:20px;
                }

                .painel a {
                    color:#333;
                    font-size:14px;
                    text-align:center;
                    text-decoration:none;
                }


                figcaption {
                    width:100px;
                    margin-left:-25px;
                    padding:0;
                }

                .novidades {
                    background-color:#F5DCDC;
                    float:left;
                    margin:30px 0 0 0;
                }

                .novidades li{
                    margin-right:50px;
                }

                .novidades img{
                    margin-left:-72px;
                    padding:0;
                    width:180px;
                    height:150px;
                }

                .Mais-Vendidos {
                    float:right;
                    background-color:#DCDCF5;
                    margin:30px 0 0 0;
                }

                .Mais-Vendidos li{
                    margin-left:52px;
                }

                .Mais-Vendidos img{
                    margin-left:-95px;
                    padding:0;
                    width:180px;
                    height:150px;
                }

                footer {
                    position:relative;
                    top:15px;
                    width:100%;
                    height:80px;
                    clear:both;
                    background-image:url(../img/fundo-rodape.png);
                    padding: 20px 0;
                }

                footer img{
                    position: absolute;
                    top:15px;
                    width:100%;
                    height:80px;
                    clear:both;
                }

                footer .container   {
                    position: relative;
                }

                footer .container img {
                    margin-left:-20px;
                    padding:0;
                    width:172px;
                    height:72px;
                }

                .social {
                    position:   absolute;
                    top: 12px;
                    right: 0;
                }

                .social a {
                    /*   tamanho    da  imagem  */
                    height: 32px;
                    width: 32px;
                    /*  image   replacement */
                    display:block;
                    text-indent:-9999px;        
                }

                .social a[href*="facebook.com"] {
                    background-image:   url(../img/facebook.png);
                }
                .social a[href*="twitter.com"]  {
                    background-image:   url(../img/twitter.png);
                }
                .social a[href*="plus.google.com"]  {
                    background-image:   url(../img/googleplus.png);
                }

                .social li{
                    float: left;
                    margin-left: 25px;
                }

            </style>


        </head>
        <body>
            <header class="container">
                <h1> <img src="../img/logo.png" alt="Logo da Mirror Fashion"></h1>
                <p class="sacola"><img src="../img/sacola.png"> Nenhum Item na sacola de Compras </p>
                <nav class="menu-opções">
                    <ul>
                        <li><a href="#">Lista de Desejos</a></li>
                        <li><a href="#">Cartão Fidelidade</a></li>
                        <li><a href="sobre.html">Sobre</a></li>
                        <li><a href="#">Ajuda </a></li>
                    </ul>
                </nav>
            </header>
            <div class="container">
                <section class="Busca"/>
                    <h2> Busca </h2>
                    <form> 
                        <input type="search"> 
                        <Button>  </Button>
                    </form>
                </section>
                <section class="menu-departamentos">
                    <h2>Departamentos</h2>
                    <nav>
                        <ul> 
                            <li><a href="#">Blusas e Camisas</a>
                                <ul> 
                                    <li><a href="#">Manga Curta</a></li>
                                    <li><a href="#">Manga Comprida</a></li>
                                    <li><a href="#">Camisa Casual</a></li>
                                    <li><a href="#">Camisa Social</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Calças</a></li>
                            <li><a href="#">Saias</a></li>
                            <li><a href="#">Vestidos</a></li>
                            <li><a href="#">Sapatos</a></li>
                            <li><a href="#">Bolsas e Carteiras</a></li>
                            <li><a href="#">Acessórios</a></li>
                        </ul>
                    </nav>
                </section>
                <section class="banner-destaque">
                    <figure>
                        <img src="[![inserir a descrição da imagem aqui][1]][1]" alt="Promoção: Big City Night">
                    </figure>
                </section>
            </div>
            <div class="container paineis">
                <section class="painel novidades">
                    <h2>Novidades</h2>
                    <ol>
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/miniatura1.png"> 
                                <figcaption id="Valores">Fuzz Cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- segundo item -->
                                <figure>
                                <img src="../img/miniatura2.png"> 
                                <figcaption>Fuzz Cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- terceiro item -->
                                <figure>
                                <img src="../img/miniatura9.png"> 
                                <figcaption>Fuzz Cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- quarto item -->
                                <figure>
                                <img src="../img/miniatura8.png"> 
                                <figcaption>Fuzz Cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- quinto item -->
                                <figure>
                                <img src="../img/miniatura14.png"> 
                                <figcaption>Fuzz Cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- sexto item -->
                                <figure>
                                <img src="../img/miniatura15.png"> 
                                <figcaption>Fuzz Cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                    </ol>
                </section>
                <section class="painel Mais-Vendidos">
                    <h2>Mais vendidos</h2>
                    <ol>
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/miniatura15.png"> 
                                <figcaption>Fuzz cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/miniatura12.png"> 
                                <figcaption>Fuzz cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/miniatura10.png"> 
                                <figcaption>Fuzz cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/foto3-azul.png"> 
                                <figcaption>Fuzz cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/foto9-azul.png"> 
                                <figcaption>Fuzz cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                        <li>
                            <a href="produto.html">
                                <!-- primeiro item -->
                                <figure>
                                <img src="../img/foto4-verde.png"> 
                                <figcaption>Fuzz cardigan por R$129,90</figcaption>
                                </figure>
                            </a>
                        </li>
                        <!-- fim do primeiro item-->
                    </ol>
                </section>
            </div>
            <footer>
                <div class="container">
                    <img src="../img/logo-rodape.png" alt="Logo da  Mirror  Fashion">
                    <ul class="social">
                        <li><a  href="http://facebook.com/mirrorfashion">Facebook</a></li>
                        <li><a  href="http://twitter.com/mirrorfashion">Twitter</a></li>
                        <li><a  href="http://plus.google.com/mirrorfashion">Google+</a></li>
                    </ul>
                </div>
            </footer>
        </body>
    </body>
</html>
4
  • Cara não consegui simular seu erro para tentar corrigi-lo. Vc tem um link do site? Ou pode editar a pergunta colocando uma imagem de onde é o erro?
    – hugocsl
    Commented 8/08/2018 às 12:10
  • editei a pergunta e adicionei uma imagem. consegue ver agora ? Commented 8/08/2018 às 12:21
  • Cara acho que não deu certo não sua imagem não está disponível...
    – hugocsl
    Commented 8/08/2018 às 12:42
  • esse é o link da imagem : dropbox.com/s/sw945m7wx2rl3lj/destaque-home.png você pode testar outra imagem as dimensões são 700x480 px e o erra é que a imagens e move ao ativar o efeito hover no menu dropdown ( menu departamentos ) você consegue ver ? Commented 8/08/2018 às 12:53

1 Resposta 1

0

Seu códigos tem muitos problemas no CSS. Use o validador do W3C e verá os problemas de marcação. Um dos problemas é o erro na sintaxe widht:525px da classe .banner-destaque {. O correto é width e não widht ("h" no final).

Outro problema também é no letter-spacing:0,7px;. No valor da propriedade usa-se o ponto e não a vírgula: seria 0.7px ou .7px. Outro problema é aqui: width:225x;. Faltou o p de px. Todos esses erros invalidam a propriedade, e isso acontece em vários pontos do seu CSS.

Mas o problema da imagem se movendo se dá por causa do widht:525px que é inválido, como eu disse no início. Corrigindo isso já resolve um dos problemas, que é fazer a imagem mencionada se mover para baixo ao usar o menu.

1
  • Obrigado, eu não analisei o código antes de enviar, e meu teclado tem problemas , faltam algumas teclas , obrigado, vou corrigir e ver se funciona. Commented 8/08/2018 às 19:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .