Leave first item in menu enabled

Asked

Viewed 25 times

0

I’m trying to leave the first link of this vertical menu already activated, IE, it is already sample, showing the panel next to, and only changes when I move the mouse in others, I’m trying more I can not, could help me with ideas or tips?

follows the css code:

<style>
.nav-area {
    position: relative;
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
    width: 250px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 15px;
    border-right: solid 1px rgb(216, 210, 210);
}

.nav-area a,
.nav-area a:link,
.nav-area a:visited,
.nav-area a:focus {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

.nav-area a:hover {
    color: brown;
    text-decoration: none;
}

.nav-area>li {
    display: block;
    text-align: center;
}

.nav-area>li>a {
    padding: 10px 18px;
    display: block;
}

.nav-area>li:hover a {
    color: #fff;
}

.nav-area>li:hover {
    background-color: #E2B38B;
}

.nav-area>li>.sub-nav {
    list-style: none;
    top: -35px;
    left: 250px;
    width: 900px;
    min-height: 100%;
    text-align: left;
    margin-top: 30px;
    padding: 0;
    z-index: 99;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.nav-area>li:hover .sub-nav {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.nav-area ul li:hover::after {
    color: #247c9d;
}

.nav-area .sub-menu {
    width: 100%;
    float: left;
    color: #fff;
    margin: 0 0 0 15px;
}

.nav-area .sub-menu ul {
    padding: 0px;
    margin: 0;
}

.nav-area .sub-menu ul li {
    padding: 0;
    list-style: none;
    font-size: 12px;
    margin-left: 20px;
}

.nav-area .sub-menu h3 {
    font-size: 20px;
    padding: 10px 10px;
    font-weight: bold;
    margin: 30px 30px 30px 0;
    color: #E2B38B;
    text-align: left;
}

.nav-area .sub-menu ul li a {
    display: block;
    padding: 0 0 15px 0;
    color: black;
    font-size: 15px;
}

.nav-area .sub-menu ul li a:hover {
    color: #E2B38B;
}

.nav-area .sub-menu .column {
    display: flex;
    align-items: initial;
    justify-content: space-around;
    max-width: 400px;
    min-height: 350px;
}

.nav-area .sub-menu .column-img {
    display: flex;
    align-items: initial;
    justify-content: space-around;
}

this is the html:

 <ul class="nav-area">

    <li>
        <a href="#">Cadeiras, Bancos e Banquetas</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Cadeiras, Bancos e Banquetas</h3>
                <div class="column-img">
                    <ul>
                        <li><a href="#">Bancos</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Cadeiras de Escritório</a></li>
                        <li><a href="#">Puffs</a></li>
                        <li><a href="#">Recamiers</a></li>
                    </ul>
                    <a href="#"><img src="/01.png" alt=""></a>
                    <a href="#"><img src="/cadeiras-bancos-img2-menu.png" alt=""></a>
                    <a href="#"><img src="/cadeiras-bancos-img3-menu.png" alt=""></a>

                </div>
            </div>
        </div>
        </div>
    </li>

    <li>
        <a href="#">Espelhos</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Espelhos</h3>
                <div class="column-img">
                    <ul>
                        <li><a href="#">Espelho de Chão</a></li>
                        <li><a href="#">Espelho de Parede</a></li>
                        <li><a href="#">Espelho de Pia</a></li>
                        <li><a href="#">Espelhos decorativos</a></li>
                    </ul>
                    <a href="#"><img src="/banner-menu_p_linha-camarim_1709.png" alt=""></a>
                    <a href="#"><img src="/banner-menu_g_linha-pelicano_1709.png" alt=""></a>


                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Aparadores e Buffets</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Aparadores e Buffets</h3>
                <ul>
                    <li><a href="#">Aparadores</a></li>
                    <li><a href="#">Bares</a></li>
                    <li><a href="#">Buffets</a></li>
                    <li><a href="#">Cristaleiras</a></li>
                </ul>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Mesas</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Mesas</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Aparadores</a></li>
                        <li><a href="#">Base de Mesa</a></li>
                        <li><a href="#">Cavaletes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Office</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Office</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armarios</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Estantes e Racks</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Estantes e Racks</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armario de Banheiro</a></li>
                        <li><a href="#">Armario de Cozinha</a></li>
                        <li><a href="#">Arquivos</a></li>
                        <li><a href="#">Baús</a></li>
                        <li><a href="#">Cabideiro</a></li>
                        <li><a href="#">Closets</a></li>
                        <li><a href="#">Cômodas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Gaveteiros</a></li>
                        <li><a href="#">Mesas de Cabeceiras</a></li>
                        <li><a href="#">Puxadores</a></li>
                        <li><a href="#">Sapateiras</a></li>
                        <li><a href="#">Guarda Roupas</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Sófas, Poltronas e Puffs</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Sófas, Poltronas e Puffs</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Chaise-longes</a></li>
                        <li><a href="#">Poltronas</a></li>
                        <li><a href="#">Puffs</a></li>
                        <li><a href="#">Sófa Cama</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Sófas</a></li>
                        <li><a href="#">Sófas recicláveis e retráteis</a></li>
                        <li><a href="#">Sófas Modulares</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Office</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Office</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armarios</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Office</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Office</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armarios</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>
html5 css3
  • 1

    Have you thought about using the Selected attribute in the select option?

  • Yes, I tried, but in the option he puts all the elements in a box, for you to clikar and choose, in my case, they are already out. more thanks for the tip man, every idea is welcome ^^.

1 answer

1

Html =>


<html>

<head><link rel="stylesheet" href="style.css"></head>

<body>

    

     <ul class="nav-area">

    <li id="go">
        <a href="#">Cadeiras, Bancos e Banquetas</a>
        <div id="fds">
            <div class="sub-menu">
                <h3>Cadeiras, Bancos e Banquetas</h3>
                <div class="column-img">
                    <ul>
                        <li><a href="#">Bancos</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Cadeiras de Escritório</a></li>
                        <li><a href="#">Puffs</a></li>
                        <li><a href="#">Recamiers</a></li>
                    </ul>
                    <a href="#"><img src="/01.png" alt=""></a>
                    <a href="#"><img src="/cadeiras-bancos-img2-menu.png" alt=""></a>
                    <a href="#"><img src="/cadeiras-bancos-img3-menu.png" alt=""></a>

                </div>
            </div>
        </div>
        </div>
    </li>

    <li>
        <a href="#">Espelhos</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Espelhos</h3>
                <div class="column-img">
                    <ul>
                        <li><a href="#">Espelho de Chão</a></li>
                        <li><a href="#">Espelho de Parede</a></li>
                        <li><a href="#">Espelho de Pia</a></li>
                        <li><a href="#">Espelhos decorativos</a></li>
                    </ul>
                    <a href="#"><img src="/banner-menu_p_linha-camarim_1709.png" alt=""></a>
                    <a href="#"><img src="/banner-menu_g_linha-pelicano_1709.png" alt=""></a>


                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Aparadores e Buffets</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Aparadores e Buffets</h3>
                <ul>
                    <li><a href="#">Aparadores</a></li>
                    <li><a href="#">Bares</a></li>
                    <li><a href="#">Buffets</a></li>
                    <li><a href="#">Cristaleiras</a></li>
                </ul>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Mesas</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Mesas</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Aparadores</a></li>
                        <li><a href="#">Base de Mesa</a></li>
                        <li><a href="#">Cavaletes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Office</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Office</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armarios</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Estantes e Racks</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Estantes e Racks</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armario de Banheiro</a></li>
                        <li><a href="#">Armario de Cozinha</a></li>
                        <li><a href="#">Arquivos</a></li>
                        <li><a href="#">Baús</a></li>
                        <li><a href="#">Cabideiro</a></li>
                        <li><a href="#">Closets</a></li>
                        <li><a href="#">Cômodas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Gaveteiros</a></li>
                        <li><a href="#">Mesas de Cabeceiras</a></li>
                        <li><a href="#">Puxadores</a></li>
                        <li><a href="#">Sapateiras</a></li>
                        <li><a href="#">Guarda Roupas</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Sófas, Poltronas e Puffs</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Sófas, Poltronas e Puffs</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Chaise-longes</a></li>
                        <li><a href="#">Poltronas</a></li>
                        <li><a href="#">Puffs</a></li>
                        <li><a href="#">Sófa Cama</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Sófas</a></li>
                        <li><a href="#">Sófas recicláveis e retráteis</a></li>
                        <li><a href="#">Sófas Modulares</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Office</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Office</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armarios</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>
        <a href="#">Office</a>
        <div class="sub-nav">
            <div class="sub-menu">
                <h3>Office</h3>
                <div class="column">
                    <ul>
                        <li><a href="#">Armarios</a></li>
                        <li><a href="#">Cadeiras</a></li>
                        <li><a href="#">Estantes</a></li>
                        <li><a href="#">Escrivaninhas</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Mesa de Centro</a></li>
                        <li><a href="#">Mesa de Jantar</a></li>
                        <li><a href="#">Mesa Laterais</a></li>
                        <li><a href="#">Tampos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>
</body>

</html>

Css =>

.nav-area {
    position: relative;
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
    width: 250px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 15px;
    border-right: solid 1px rgb(216, 210, 210);
}

.nav-area a,
.nav-area a:link,
.nav-area a:visited,
.nav-area a:focus {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

.nav-area a:hover {
    color: brown;
    text-decoration: none;
}

.nav-area>li {
    display: block;
    text-align: center;
}

.nav-area>li>a {
    padding: 10px 18px;
    display: block;
}

.nav-area>li:hover a {
    color: #fff;
}

.nav-area>li:hover {
    background-color: #E2B38B;
}

.nav-area>li>.sub-nav {
    list-style: none;
    top: -35px;
    left: 250px;
    width: 900px;
    min-height: 100%;
    text-align: left;
    margin-top: 30px;
    padding: 0;
    z-index: 99;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

#fds{
    
    list-style: none;
    top: -35px;
    left: 250px;
    width: 900px;
    min-height: 100%;
    text-align: left;
    margin-top: 0px;
    padding: 0;
    z-index: 99;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    position: absolute; 

}

#go:hover #fds{
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.nav-area>li:hover .sub-nav {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.nav-area:hover #fds{
    list-style: none;
    top: -35px;
    left: 250px;
    width: 900px;
    min-height: 100%;
    text-align: left;
    margin-top: 30px;
    padding: 0;
    z-index: 99;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    position: absolute; 
}

.nav-area ul li:hover::after {
    color: #247c9d;
}

.nav-area .sub-menu {
    width: 100%;
    float: left;
    color: #fff;
    margin: 0 0 0 15px;
}

.nav-area .sub-menu ul {
    padding: 0px;
    margin: 0;
}

.nav-area .sub-menu ul li {
    padding: 0;
    list-style: none;
    font-size: 12px;
    margin-left: 20px;
}

.nav-area .sub-menu h3 {
    font-size: 20px;
    padding: 10px 10px;
    font-weight: bold;
    margin: 30px 30px 30px 0;
    color: #E2B38B;
    text-align: left;
}

.nav-area .sub-menu ul li a {
    display: block;
    padding: 0 0 15px 0;
    color: black;
    font-size: 15px;
}

.nav-area .sub-menu ul li a:hover {
    color: #E2B38B;
}

.nav-area .sub-menu .column {
    display: flex;
    align-items: initial;
    justify-content: space-around;
    max-width: 400px;
    min-height: 350px;
}

.nav-area .sub-menu .column-img {
    display: flex;
    align-items: initial;
    justify-content: space-around;
}

Although I have forwarded the code were few changes.

  1. I created a stylization by id=fds in the first div and I set it in css a visibility=Visible by default
  2. A Nav-area Hover pointing to id='fds' to give it up.
  3. And associated to the first li an id="go" that makes visible the div of id="fds" when Hover/onmousehover is activated.

  • Man, what a top draw, opened my mind here, thanks man.

  • You’re welcome, man, tmj!

Browser other questions tagged html5 css3

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