having problems creating a dropdown menu with css

Question

I'm trying to create a dropdown menu just for one li a element but the dropdown appears horizontally instead of vertically. It's based in another html code i wrote before and it worked but i don't know what's wrong with this one. I need just the last li to be a dropdown, and the hole code to be resposive.

this is the html code:

<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>

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

Thanks!

First of all correct your dom structure. you have several invalid elements — iguypouf
– iguypouf, Commented Jul 26, 2020 at 7:43

St.Nicholas · Accepted Answer · 2020-07-26 09:41:51Z

First, you need to correct the doms in your HTML. You're not closing </ou> before you close in inner <li> of the sub menu. Also, you're not closing <ul>, and you have a closing </ou> with no opening tag

As for the CSS of the menu, you need to first hide the submenu, and show it only once you have over the word. I added an ID to the last <li> object, so we can target it for hovering.

Consider this:

<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>

Collectives™ on Stack Overflow

having problems creating a dropdown menu with css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related