Home/ Questions/Q 8476765
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T18:16:13+00:00

I have a nav. When I hover some elements, the submenu should be displayed

  • 0

I have a nav. When I hover some elements, the submenu should be displayed ‘block’ but this doesn’t work. See:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="generator" content="Notepad++" />
    <meta name="author" content="Erick Ribeiro" />
    <meta http-equiv="refresh" content="60" />
    <title>Mozilla Firefox</title>
    <style type="text/css">
        *{
            font-family: calibri;
        }
        #menu
        {
            float: left;
        }
        .submenu
        {
            margin-top: 26px;
            padding: 10px;
            border: solid 1px rgb(224, 224, 224);
            background: rgb(254, 254, 254);
            color: rgb(0, 128, 224);
            border-radius: 0 0 4px 4px;
        }
        #menuHome:hover ~ #submenuControle
        {
            display: block;
            opacity: 0;
            color: red;
        }
        #submenuHome
        {
            display: none;
            opacity: 0;
        }
        #submenuControle
        {
            display: block;
            opacity: 1;
        }
        #submenuGestão
        {
            display: none;
            opacity: 0;
        }
        #submenuRL
        {
            display: none;
            opacity: 0;
        }
        #submenuSI
        {
            display: none;
            opacity: 0;
        }
        ul
        {
            float: left;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        li
        {
            display: inline;
            float:left;
        }

        .primeiroItem
        {
            border: solid rgb(224, 224, 224);
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-radius: 4px 0 0 4px;
        }
        .naoPrimeiroItem
        {
            border: solid rgb(224, 224, 224);
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 0;
        }
        .ultimoItem
        {
            border: solid rgb(224, 224, 224);
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 0;
            border-radius: 0 4px 4px 0;
        }
        a
        {
            text-decoration:none;
            padding: 8px;
            border: solid 1px;
            color: rgb(0, 0, 0);
            background: rgb(240,240, 240);
        }
        a:visited
        {
            color: rgb(0, 0, 0);
        }
    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
    <nav id="menu">
        <ul>
            <li><a id="menuHome" class="primeiroItem" href="#">Home</a></li>
            <li><a id="menuControle" class="naoPrimeiroItem" href="#">Controle</a></li>
            <li><a id="menuGestao" class="naoPrimeiroItem" href="#">Gestão</a></li>
            <li><a id="menuRL" class="naoPrimeiroItem" href="#">Relatórios e Listas</a></li>
            <li><a id="menuSI" class="ultimoItem" href="#">Sistema Informação</a></li>
        </ul>
        <div id="submenuHome" class="submenu">
        </div>
        <div id="submenuControle" class="submenu">
            BSC
            Comunicação
            Treinamento
            Documentos
            Controle de Acesso
        </div>
        <div id="submenuGestão" class="submenu">
            ASV
            Treinamento
            Suprimentos
            Chamados</div>
        <div id="submenuRL" class="submenu">
            Listas
            Relatórios
        </div>
        <div id="submenuSI" class="submenu">
        </div>
    </nav>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is, you’re using a sibling selector to select an item that is not a sibling.
    Your code #menuHome:hover ~ #submenuControle means “when I hover #menuHome, select the sibling with id of submenuControle”

    But in your code #menuHome doesn’t have any siblings.

    CSS doesn’t allow you to traverse backwards, so if you need the submenu to apply styles when hovering menuHome you have 2 options.

    1. Change the layout
    2. Use javascript.

    If I’m understanding your code, you are trying to make hover menus, so I would suggest a change to the layout.

    Edit: Made some quick changes to your code adding hover menus (which I believe is what you’re after). You can change the styling and whatnot to suit your needs. http://jsfiddle.net/xHKKQ

    • 0