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にカーソルを合わせると、submenuControleのIDを持つ兄弟を選択する」という意味です。

しかし、あなたのコードでは、＃menuHomeには兄弟がいません。

CSSでは逆方向にトラバースできないため、menuHomeにカーソルを合わせたときにスタイルを適用するためにサブメニューが必要な場合は、2つのオプションがあります。

  1. レイアウトを変更する
  2. javascriptを使用します。

私があなたのコードを理解しているなら、あなたはホバーメニューを作ろうとしているので、私はレイアウトの変更を提案するでしょう。

編集：ホバーメニューを追加してコードにいくつかの簡単な変更を加えました（これはあなたが求めているものだと私は信じています）。ニーズに合わせてスタイリングなどを変更できます。http://jsfiddle.net/xHKKQ

于 2012-08-29T15:35:45.833 に答える