Question

我尝试使用本网站的一些提示来解决这个问题，但它似乎对我不起作用。我有一个网站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;
}

我做错了所以任何提示都会受到赞赏。

Answer 1

删除它：

.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;
   }

Answer 2

有一些不必要的样式需要清理，但如果你想要快速修复：

.navigation > li:hover > ul,
.navigation > li:hover > ul > li,
.navigation > li:hover > ul > li > a {
    text-indent: 0;
    display: block;
    z-index: 999;
    background: #fff;
}

Answer 3

我花了很多时间来分析你的代码，这就是我现在可以帮你解决的问题。

首先，将这些样式插入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%;
}

text-indent：-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;
}

这至少应该对你有所帮助，无法确定这是否是你打算做的。如果你设法完成你想要的东西，给出回应。

干杯， Artur Balestro

使用CSS下拉菜单

3 个答案: