Question

我一直在尝试使用自定义html网站上的菜单找到一个解决方案，它没有出现，但我不能出于某种原因找到解决方案而且我很好奇我做错了什么。

<div class="header_area fix" id="header">           
<div class="header_top fix">
    <div class="left_logo floatleft fix">
        <a href="index.php"><img src="img/logo.png" alt="Burning Desire Stoves Fireplace and Fire Centre" /></a>
    </div>
    <div class="main_menu floatright fix">
        <button style="floatright" id="mobile_button">Menu</button>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="showroom.php">Showroom</a></li>
            <li class="dropdown"><a href="#">Stoves</a>
            <ul>
                <li><a href="stovesWood.php">Woodburning Stoves</a></li>
                <li><a href="stovesMulti.php">Multifuel Stoves</a></li>
            </ul>
            </li>
            <li><a href="fireplaces.php">Fireplaces</a></li>
            <li><a href="#">Fires</a>
            <ul>
                <li><a href="firesGas.php">Gas Fires</a></li>
                <li><a href="firesElec.php">Electric Fires</a></li>
            </ul>
            </li>
            <li><a href="testimonial.php">Case Studies</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    </div>
</div>

您可以查看网站here 该网站是我的客户，他说他添加了一些额外的菜单选项，而没有触及CSS，然后菜单破了。更重要的是，菜单的下拉菜单没有出现，我试图通过一些显示来实现：阻止或z-index没有运气。

他还添加了一个名为Couch的PHP CMS，它正在添加标签。

为了让您更好地了解以下代码实际上是一个代码段，它位于最有可能的cms路径“editor / snippets / header”

Answer 1

这个CSS是各种各样的。

问题：

overflow: hidden

.fixed导致文本消失。
据我所知，没有CSS显示悬停下拉列表
下拉列表未隐藏，因此他们占用空间强制主列表退出导航栏
list-style-type:disc元素

li

我会把它搞砸一分钟，但这些都是问题。

更新我摆弄了CSS，并显示了下拉列表。你必须使用一些CSS使它们看起来很漂亮，但它们正在工作。是的，这是hacky的善良的，但我用5做了我能做的事情？ CSS表格都在竞争屏幕时间。

    /* menu extra css */
.dropdown:hover .dropdown-hidden {
  display:block;
}
.dropdown-hidden {
  float: none!important;
  display: none;
  position: absolute;
  z-index: 99999999;
  left: 0px;
  background: #fff;
}
.dropdown-hidden li {
  display: block;
  float: none!important;
  position: relative;
}
.fix {
  overflow: inherit!important;
}
li {
  list-style-type: none;
}

-

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="showroom.php">Showroom</a></li>
    <li class="dropdown">
        <a href="index.html#">Stoves</a>
    <ul class="dropdown-hidden">
        <li><a href="stovesWood.php">Woodburning Stoves</a></li>
        <li><a href="stovesMulti.php">Multifuel Stoves</a></li>
    </ul>
    </li>
    <li><a href="fireplaces.php">Fireplaces</a></li>
    <li><a href="index.html#">Fires</a>
    <ul class="dropdown-hidden">
        <li><a href="firesGas.php">Gas Fires</a></li>
        <li><a href="firesElec.php">Electric Fires</a></li>
    </ul>
    </li>
    <li><a href="testimonial.php">Case Studies</a></li>
    <li><a href="contact.php">Contact</a></li>
</ul>

Answer 2

.main-menu>ul>li>ul  {
     position:absolute;

 }

您的菜单有一个Dropwown但它没有被隐藏，所以需要一些空间。并且标题隐藏了oveflow，因此菜单完全隐藏。

添加此css，您的菜单将会显示，

但您需要为下拉列表添加代码才能正常工作。

下拉菜单破了

2 个答案: