2

サブメニューを持つ HTML メニューを作成しましたが、メイン メニューにカーソルを合わせてサブメニューを表示すると、アクセスできません。マウスを下に移動して移動する前に消えます。何が間違っているのかわかりません。私のコードで誰かが助けてくれるかもしれません。ありがとう

#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline;}
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; line-height: 2em;}
#header ul li ul{ position: static;display: none; z-index: 999;top:150%;}
#header ul li:hover a { font-weight:bold; color: #000000}
#header ul li:hover ul { display: block; position:absolute;}

HTMLを表示するように編集

     <ul>
                <li><a href="/Default.aspx">Home</a>              
                </li>
                <li>
                    <a href="/Cover/HRMS.aspx">HRMS</a>
                    <ul>
                    <li>
                    <a href="/Cover/HRMS.aspx">Position</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">COA</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Employee</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Estate</a>
                    </li>
                    </ul>
                </li>
                <li>
                    <a href="/Cover/EmployeeMaintenance.aspx">Employee Maintenance</a>
                </li>
                <li>
                <a href="/Cover/Payroll.aspx">Payroll</a>
                </li>
                <li>
                <a href="/Cover/DataTransfer.aspx">Data Transfer</a>
                </li>
                <li>
                <a href="/Cover/Reports.aspx">Reports</a>
                </li>
                <li>
                <a href="/Cover/Administration.aspx">Administration</a>
                </li>
                <li>
                <a href="/Cover/Help.aspx">Help</a>
                </li>
              </ul>

4

3 に答える 3

1

問題は、メインと子の間の切断<ul>です。

あなたのスタイルでul li ul { position: static;display: none; z-index: 999;top:150%;}

は切断を作成します（したがって、にカーソルを合わせたときにサブメニューのロジックをtop:150%;押す代わりに、何にもカーソルを合わせません ）。代わりに使用してみることができます：:hoverul liul li ulpadding-top

ul li ul{ position: static;display: none; z-index: 999; padding-top:10px;}

編集：これはあなたが見ることができる実用的なナビゲーションメニューの例です。

編集2：FirefoxとChromeで動作するように見えますが、IEでは動作しません。

于 2013-03-04T17:34:50.260 に答える
0

次の行に沿って、直接子セレクターが必要になります。

li:hover > ul { display: block; (...) }

これは、<ul>直接の親にカーソルを合わせると、リスト内の子が表示されることを意味し<li>ます。

于 2013-03-04T17:48:02.263 に答える
0

ポルトガル語でドロップダウン メニューに関する記事を 1 つ書きましたが、Google 翻訳などに役立つと思います。

それをチェックしてください：http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizo​​ntal-com-html5-e-css3.aspx

于 2013-03-04T18:07:40.857 に答える