时间戳

首页 > 解决方案 > 使用 CSS 创建下拉菜单时遇到问题

html - 使用 CSS 创建下拉菜单时遇到问题

问题描述

我正在尝试仅为一个 li a 元素创建一个下拉菜单，但下拉菜单水平显示而不是垂直显示。它基于我之前编写的另一个 html 代码，它可以工作，但我不知道这个代码有什么问题。我只需要最后一个 li 作为下拉列表，并且孔代码是响应式的。

这是html代码：

<header id=main_header>
    <nav><ou id="header_items">
      <li id="first"><a> LOGO </a></li>
      <li><a href="."> HABITACIONES </a></li>
      <li><a href="."> SPA </a></li>
      <li><a href="."> CONFORT </a></li>
      <li><a href="."> UBICACIÓN </a></li>
      <li><a href="."> IDIOMA </a>
        <ul class="submenu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ou></li>
    </ol></nav>
</header>

和 CSS：

body {
  background-color: #e8ebea;
  width: auto;
  height: 2000px;
}

/*header*/
#main_header {
  width: auto;
  height: 60px;
  margin: 0;
}

    nav ul #header_items {
        width: 100%;
        height: 100%;
        margin: 0;
    }

        #header_items {
          list-style-type: none;
        }

            #header_items li {
              display: inline-block;
              position: relative;
              width: 16%;
              height: 100%;
              margin-right: -4px;
            }

            #header_items li#first {
              width: 20%;
            }

                #header_items li a {
                  display: block;
                  line-height: 60px;
                  text-align: center;
                  font-size: auto;
                  text-decoration: none;
                  color: #000;
                }

                  #header_items li a:hover {
                    background-color: #dcdedd;
                  }

                  .submenu {
                            background-color: #e8ebea;
                            width: 100%;
                  height: auto;
                            display: block;
                  position: absolute;
                   }

谢谢！

标签： htmlcssdropdownresponsive

解决方案

首先，您需要更正 HTML 中的 dom。在关闭子菜单</ou>内部之前，您不会关闭。<li>此外，您没有关闭<ul>，并且您有一个</ou>没有开始标签的关闭

至于菜单的CSS，你需要先把子菜单隐藏起来，只有在你过字的时候才显示出来。我为最后一个对象添加了一个 ID <li>，因此我们可以将其定位为悬停。

考虑一下：

<style>
body {
    background-color: #e8ebea;
    width: auto;
    height: 2000px;
}

/*header*/
#main_header {
    width: auto;
    height: 60px;
    margin: 0;
}

nav ul #header_items {
    width: 100%;
    height: 100%;
    margin: 0;
}

#header_items {
    list-style-type: none;
}

#header_items li {
    display: inline-block;
    position: relative;
    width: 16%;
    height: 100%;
    margin-right: -4px;
}

#header_items li#first {
    width: 20%;
}

#header_items li a {
    display: block;
    line-height: 60px;
    text-align: center;
    font-size: auto;
    text-decoration: none;
    color: #000;
}

#header_items li a:hover {
    background-color: #dcdedd;
}

.submenu {
    background-color: #e8ebea;
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    margin:0;
    display:none;
}
#submenu:hover > .submenu{
    display:inline-block;
}
</style>

<header id=main_header>
    <nav>
        <ou id="header_items">
            <li id="first"><a> LOGO </a></li>
            <li><a href="."> HABITACIONES </a></li>
            <li><a href="."> SPA </a></li>
            <li><a href="."> CONFORT </a></li>
            <li><a href="."> UBICACIÓN </a></li>
            <li id="submenu"><a > IDIOMA </a>
                <ul class="submenu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
        </ou>
    </nav>
</header>

推荐阅读