-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,
.navigation > li:hover > ul > li,
.navigation > li:hover > ul > li > a {
    text-indent: 0;
    display: block;
    z-index: 999;
    background: #fff;
}
于 2013-11-13T16:07:44.907 回答
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 回答