1

我有一个导航。当我悬停某些元素时，子菜单应该显示为“块”，但这不起作用。看：

<!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>
4

1 回答 1

4

问题是，您正在使用同级选择器来选择不是同级的项目。您的代码#menuHome:hover ~ #submenuControle表示“当我悬停#menuHome 时，选择 ID 为 submenuControle 的兄弟姐妹”

但是在您的代码中 #menuHome 没有任何兄弟姐妹。

CSS 不允许您向后遍历，因此如果您需要子菜单在悬停 menuHome 时应用样式，您有 2 个选项。

  1. 更改布局
  2. 使用 JavaScript。

如果我理解您的代码，您正在尝试制作悬停菜单，所以我建议更改布局。

编辑：对您的代码进行了一些快速更改，添加了悬停菜单（我相信这就是您所追求的）。您可以更改样式和其他内容以满足您的需求。http://jsfiddle.net/xHKKQ

于 2012-08-29T15:35:45.833 回答