Question 250422 in Html Question posted in
Some basic documentation can be found here.

How to create an interactive nav bar in HTML?

to learn HTML more in depth I’m building the website of a famous fashion brand, trying to emulate and build all the functions that I see with the HTML knowledge that I have. I still haven’t learned CSS, but I would like to know how to lay the html basics for a nav bar that, when hovered, drops down a menu with anchors to other sites and forms.

This is what I’ve tried so far.
The HTML:

    <header>
        <nav>

            <img src="img/logo.png" alt="Brand Name" title="Brand Name" width="250" loading="lazy">

            <ul>
                <li>
                    <div class="navElement-nuoviArrivi">
                        <div class="nuoviArrivi">NUOVI ARRIVI</div>
                        <div class="dropdown-nuoviArrivi">
                            <ul>
                                <li><a href="https://link.com"></a>Coats</li>
                                <li><a href="https://link.com"></a>Shoes</li>
                                <li><a href="https://link.com"></a>Belts</li>
                                <li><a href="https://link.com"></a>Sweaters</li>
                                <li><a href="https://link.com"></a>Jewelry</li>
                            </ul>
                        </div>
                    </div>
                </li>

                <li><!--Other Nav Element with the same code structure--></li>
                <li><!--Other Nav Element with the same code structure--></li>
                <li><!--Other Nav Element with the same code structure--></li>
                <li><!--Other Nav Element with the same code structure--></li>
            </ul>
        </nav>
    </header>

The CSS I found on W3:

/* The container <div> - needed to position the dropdown content */
.navElement-nuoviArrivi {
  position: relative;
  display: inline-block;
}

  .dropdown-nuoviArrivi {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-nuoviArrivi a:hover {background-color: #ddd;}
  
  /* Show the dropdown menu on hover */
  .navElement-nuoviArrivi:hover .dropdown-nuoviArrivi {display: block;}
Tags:

2

Answers


  1. 0

    The basics you want to master here is using a display: none on the normal state of your dropdown. And when hovering this it changes to display: block. Here is an example:

    /* Base State */
.dropdown-nuoviArrivi {
  display: none;
}

/* Hover */
.nuoviArrivi:hover .dropdown-nuoviArrivi{
  display: block;
}
    <div class="nuoviArrivi">
  <button class="dropdown-btn">NUOVI ARRIVI</button>
  <div class="dropdown-nuoviArrivi">
    <ul>
      <li><a href="https://link.com">Coats</a></li>
      <li><a href="https://link.com">Shoes</a></li>
      <li><a href="https://link.com">Belts</a></li>
      <li><a href="https://link.com">Sweaters</a></li>
      <li><a href="https://link.com">Jewelry</a></li>
    </ul>
  </div>
</div>

    Also, the thing you’re doing wrong here is: you’re closing this div right after you’re opening it. <div class="nuoviArrivi">NUOVI ARRIVI</div> The thing you want to do here is close the div after the whole list element. Because now your list isn’t associated with this div, while the CSS says it is and the hover is depending on this. The right way to do it is in the example above. You can run the code snippet to see it in action.

    If you have any other questions let me know! 🙂

    Login or Signup to reply.
  2. 0

    It looks like you’re on the right track to create a dropdown menu in your navigation bar using HTML and CSS. However, there are a few adjustments needed to make it functional.

    /* The container <li> - needed to position the dropdown content */
.navElement {
    position: relative;
    display: inline-block;
}

/* Style the dropdown menu */
.dropdown {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the dropdown links */
.dropdown ul li {
    padding: 10px;
    text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown ul li:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.navElement:hover .dropdown {
    display: block;
}
    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <img src="img/logo.png" alt="Brand Name" title="Brand Name" width="250" loading="lazy">
            <ul>
                <li class="navElement">
                    <a href="#">NUOVI ARRIVI</a>
                    <div class="dropdown">
                        <ul>
                            <li><a href="https://link.com">Coats</a></li>
                            <li><a href="https://link.com">Shoes</a></li>
                            <li><a href="https://link.com">Belts</a></li>
                            <li><a href="https://link.com">Sweaters</a></li>
                            <li><a href="https://link.com">Jewelry</a></li>
                        </ul>
                    </div>
                </li>
                <!-- Add more navigation items here -->
            </ul>
        </nav>
    </header>
</body>
</html>

    In the code I provided

    I’ve enhanced the navigation menu by making "NUOVI ARRIVI" clickable with an <a> element, wrapping each menu item in <li>
    elements with the class navElement, and amended the CSS selectors and
    rules to style the dropdown links.

    But obviously this is very basic it’s up to you to customise it the way you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search