Vertical dropdown menu and Images

Question

Vertical dropdown menu and Images

Navigation

#1 by (0 votes)

2

I have in the site that I'm doing a dropdown menu, my problem is when I activate the hover effect by mouseover the menu the images that are next to 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 under the logo menu with title (departments) and in the image that I added with title (banner-highlighted)

<!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: '2A';
                    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:'56';
                    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

asked by anonymous 08.08.2018 / 14:00

1 answer

Implementing Paint in JavaFX Adding redirect links to Jwplayer playlist elements

score 0 · Accepted Answer

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

Another problem is also in letter-spacing:0,7px; . The value of the property uses the period and not the comma: it would be 0.7px or .7px . Another problem is here: width:225x; . p of px was missing. All of 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 image mentioned move down when using the menu.