-2

このサイトのいくつかのヒントを使用してこれを解決しようとしましたが、うまくいかないようです。私はウェブサイトhttp://apartmanimikzaton.com/paintball/index.phpを持っており、ナビゲーションのようなドロップダウンメニューを作成したいと考えています。

編集：今は追加しませんでしたが、取得したいのは、ホバー時のドロップダウンメニューテキストです。

これは私のナビゲーションです：

<ul class="navigation">
    <li id="navigation-1"><a href="index.php?stranica=onama"> O nama </a></li>
    <li id="navigation-2"><a href="index.php?stranica=oprema"> Oprema </a></li>
    <li id="navigation-3"><a href="#"> Tereni </a>
            <ul>
                <li> <a href="#"> Lokacija 1 </a> </li> 
                <li> <a href="#"> Lokacija 2 </a> </li> 
            </ul>
    </li>
    <li id="navigation-4"><a href="index.php?stranica=galerija"> Galerija </a></li>
    <li id="navigation-5"><a href="index.php?stranica=cjenik"> Cjenik </a></li>
    <li id="navigation-6"><a href="index.php?stranica=opaintballu"> O Paintballu </a></li>
    <li id="navigation-7"><a href="index.php?stranica=teamovi"> Teamovi </a></li>
    <li id="navigation-8"><a href="#"> Webshop </a></li>
</ul>

そして、これは私のcssです：

    .navigation {background: url(images/layout/navigation.jpg) no-repeat; width: 980px; height: 57px; margin: 0 0 10px 0; padding: 0;}
.navigation li, .navigation a {height: 57px; display: block;}
.navigation li {float: left; text-indent: -9999em; position: relative;}
.navigation ul ul{
  position:absolute;
  left: 0;
  top: 100px;          /* height of the parent list item */
  display:none;     /* hide it */
}

.navigation li:hover > ul{   /* show it when mouse is over the parent list item */
  display:block;
}

私は何か間違ったことをしているので、ヒントをいただければ幸いです。

4

3 に答える 3

0

これを削除します：

.navigation li:hover > ul{   /* show it when mouse is over the parent list item */
   display:block;
 }

そして、これを追加

  .navigation li:hover ul{   /* show it when mouse is over the parent list item */
         display:block;
   }
于 2013-11-13T16:06:12.603 に答える
0

私はあなたのコードを分析するために時間を割きました。

まず、これらのスタイルを CSS に挿入します。

ul.navigation li ul{
   background: none repeat scroll 0 0 #000000;
   display:none;
   padding: 0;
   position: absolute;
   top: 57px;
   width: 117px;
   z-index: 6;
}

次のスタイルについて:

.navigation li {
   float: left;
   position: relative;
   text-indent: -9999em;
   width: 100%;
}

テキストインデント: -9999em ; 挿入するドロップダウン メニューのテキストに影響を与えています。削除することをお勧めします。メニュー アイコンの上にテキストを表示したくない場合は、リンクに次のように表示するだけです。

<a href="#" title="Tereni">&nbsp;</a>

このアプローチはうまくいかないと思います：

.navigation li:hover > ul{   /* show it when mouse is over the parent list item */
  display:block;
}

代わりにこれを試して、動作するかどうかを確認してください。

.navigation li:hover ul{
  display:block;
}

それは少なくとも少しはあなたを助けるはずです。あなたが望んでいたことを達成することができたら、答えを出してください。

乾杯、アルトゥール・バレストロ

于 2013-11-13T16:23:19.590 に答える