Dropdow Vertical Menu and Images

Asked

Viewed 60 times

1

I have on the site that I’m doing a dropdown menu, my problem is when I activate the Hover effect by hovering the mouse on the menu the images that are next to it end up moving along with the menu, how do I position the menu in a way that the image does not move ? The error is in the dropdown menu below the logo with title (departments) and in the image I added with title (banner-highlight)

<!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>
html css

  • Dude I couldn’t simulate his error to try to fix it. Do you have a website link? Or you can edit the question by placing an image of where the error is?

  • edited the question and added an image. can you see now ?

  • Dude I think it didn’t work out Your image isn’t available...

  • this is the image link : https://www.dropbox.com/s/sw945m7wx2rl3lj/destaque-home.png you can test another image the dimensions are 700x480 px and the error is that the images and moves by activating the effect Hover in the dropdown menu ( menu departments ) you can see ?

1 answer

0


Your codes have many problems with CSS. Use W3C validator and you will see the markup problems. One of the problems is the error in the syntax widht:525px class .banner-destaque {. The correct is width and not widht ("h" at the end).

Another problem is also the letter-spacing:0,7px;. In the value of the property we use the point and not the comma: it would be 0.7px or .7px. Another problem is here: width:225x;. Missed the p of px. All these errors invalidate the property, and this happens at various points in your CSS.

But the problem of moving image is because of widht:525px which is invalid, as I said at the beginning. Fixing this already solves one of the problems, which is to make the mentioned image move down while using the menu.

  • Thanks, I did not analyze the code before sending, and my keyboard has problems , missing a few keys , thanks, I will fix and see if it works.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.