1

私の最終的な目標は、画像 B に表示されているものを作成することです。注: メニュー バーはページの中央に配置する必要があります。画像の垂直方向の位置合わせを中央に設定して B を作成しました。ただし、これを行った結果、ドロップダウン メニューがメイン ヘッダーから少し離れています。したがって、マウス カーソルを下に移動すると、サブメニュー項目を選択できません。これを機能させるためのアイデアはありますか？ありがとうジリアン

例AとB

<style>


      #nav{
            border:1px solid #ccc;
            border-width:1px 0;
            list-style:none;
            margin:0;
            padding:0;
            text-align:center;
        }
        #nav li{
            position:relative;
            display:inline;
        }
        #nav a{
            display:inline-block;
            padding:10px;
        }
        #nav ul{
            position:absolute;
            /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
            left:-9999px;
            margin:0;
            padding:0;
            text-align:left;
        }
        #nav ul li{
            display:block;
        }
        #nav li:hover ul{
            left:0;
        }
        #nav li:hover a{
            text-decoration:underline;
            background:#f1f1f1;
        }
        #nav li:hover ul a{
            text-decoration:none;
            background:none;
        }
        #nav li:hover ul a:hover{
            text-decoration:underline;
            background:#f1f1f1;
        }
        #nav ul a{
            white-space:nowrap;
            display:block;
            border-bottom:1px solid #ccc;
        }
        a{
            color:#c00;
            text-decoration:none;
            font-weight:bold;
        }
        a:hover{
            text-decoration:underline;
            background:#f1f1f1;
        }

</style>

</head>
<body>
<ul id="nav">
  <li><a href="link1.html">Item one</a></li>
  <li><a href="#">Item two</a>
  <ul>
   <li><a href="link1.html">Sub1</a></li>
   <li><a href="link1.html">Sub2</a></li>
  </ul>
  </li>
  <li class="double-line">
  <a href="index.php"><img style="vertical-align:middle"  src="img/logo_large.png" alt="logo" /></a></li>
  <li><a href="link4.html">The Fourth</a></li>
  <li><a href="link5.html">Last</a></li>
</ul>
</body>
</html>
4

3 に答える 3

1

あなたは次のようなことをします、

#nav ul{
  background:url('img/logo_large.png') no-repeat center center;
  /* more CSS here */
}

リンクとして使用する必要がない限り。次にposition:absolute;、 である画像を検討し#nav ul、position:relative;他のリンクに を使用してフローティング レイアウトを使用し、z-indexそれらが重なる場所にオーバーラップさせます。

于 2013-09-10T23:21:27.967 に答える
0

サブメニューを上にオフセットして、ロゴの高さを覆うことができます.

これは、Google ロゴを使用し、これを追加してサブメニュー スタイルを変更するJSfiddleです。

#nav ul {
   top: 20px;
}
于 2013-09-10T22:58:03.397 に答える
0

CSS に挿入してみてくださいline-height: X px。(たとえば、親 div の高さ) 各メニュー タイトル (項目 1、項目 2、第 4 など)

于 2013-09-10T23:25:00.350 に答える