Navbar drop-down menu width problem and hover problem-CodePudding

I created a navbar having a drop down menu displayed when the button is hovered upon. This is the codepen: https://codepen.io/sahxil/pen/qBoVgXg

I have three problems:

The anchor tag with the drop-down menu is taking the width of it's drop-down menu, whereas I want it's width to be normal and there should be no changes in the navigation bar when that anchor tag is hovered upon except for the drop-down menu to appear.
The red underline below the anchor tag having a drop-down menu is displaced and is having width equal to 30% of drop-down menu' width(the underline has the width equal to 30% of anchor tag width, but the width of anchor tag somehow becomes equal to drop-down menu' width)
I want the drop down to appear only when hovered upon, and to disappear when the cursor is out of the anchor tag. The mouseover EventListener seems to work but the mouseout doesn't. What exact code should I change in my JavaScript to make it work.

How, do I fix this?

CodePudding user response：

With something simple like a drop-down menu, it's a lot easier (and reliable) to use CSS instead of JavaScript where you can, which is what looks like messed up your menu. I fixed the menu with some CSS hover and descendant selectors.

The other two issues involved some incorrect position attributes as well as some unnecessarily complex CSS attributes, classes, and elements working against each other, as well as some JavaScript e. I refactored a lot of the HTML and classes to be cleaner, and removed your option and simple classes, as well as some of your unnecessary divs.

To fix the red underline, I used a combination of CSS variables and the calc() function to position it correctly, doing two main things.

First of all, I set a --width variable, as well as the actual width of the line itself, to be the same as that of the button (an li), but minus two characters (2em), so that it would look about the same width as the text within the button.

ul:hover::after {
  --width: calc(100% - 2em);
  width: var(--width);
}

And then to center it, I used calc() functions to set the left property to half of the available space.

left: calc(calc(100% - var(--width))/2);

I also changed your ul into a menu, and made it display: flex with a gap and padding, instead of the different margins that you had.

I linked my fixed (and simplified) code below. Hopefully that all makes sense! Feel free to reach out if you need more help!

body {
  margin: 0;
  background-color: #121212;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(0, 0, 0);
  z-index: 999;
  position: sticky;
  top: 0;
  left: 0;
}

#header.headerr__black {
  background-color: #121212;
}

#navbar {
  width: 100vw;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  padding: 0;
}

#navbar li {
  list-style: none;
  position: relative;
}

a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  transition: 200ms ease-in-out;
}

ul {
  padding: 1em;
  margin: 0;
  position: relative;
}

ul:hover::after {
  content: "";
  position: relative;
  width: 100%;
  height: 3px;
  bottom: -0.2em;
  left: 0;
}

ul li {
  display: none;
}

ul:hover li {
  display: block;
}


/* For changing color of navbar buttons when hovered on
and keeping the current page button as red */

#navbar ul a:hover {
  color: #e50914;
}


/* For current page button eg: Why Snap Smile(if active); to have an underline when
that page is active or other buttons to display underline when hovered on */

ul:hover::after {
  content: "";
  position: absolute;
  --width: calc(100% - 2em);
  width: var(--width);
  height: 3px;
  background: #e50914;
  bottom: 0.6em;
  left: calc(calc(100% - var(--width))/2);
}

.logo {
  width: 6em;
}

a.sBtn-text {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  transition: 200ms ease-in-out;
}

a.sBtn-text:hover,
a.sBtn-text.active {
  color: #e50914;
}

menu {
  margin: 0;
  position: absolute;
  z-index: 1;
  padding: 20px 40px;
  margin-top: 10px;
  border-radius: 0.5rem;
  background: #141414;
  display: none;
}

ul:hover menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.select-menu.active .options {
  display: block;
}

.select-menu.inactive .options {
  display: none;
}

.options .option {
  display: flex;
  margin-bottom: 0.5rem;
  align-items: center;
}

div.select-btn {
  position: relative;
}

<section id="header" >
  <div id="navbar">
    <a href="#">
      <img src="images/logo.png" >
    </a>
    <ul>
      <a href="what.html">What is Snap Smile</a>
    </ul>
    <ul>
      <a href="#">Teeth Spacing</a>
    </ul>
    <ul>
      <a href="solutions.html">Solutions</a>
      <menu>
        <li>
          <a href="#">Teeth Spacing</a>
        </li>
        <li>
          <a href="#">Discolored/Stained Teeth</a>
        </li>
        <li>
          <a href="#">Chipped Teeth</a>
        </li>
        <li>
          <a href="#">Missing Teeth</a>
        </li>
        <li>
          <a href="#">Straighter Smile</a>
        </li>
        <li>
          <a href="#">Whiter Smile</a>
        </li>
        <li>
          <a href="#">Cosmetic Enhancement</a>
        </li>
        <li>
          <a href="#">Night Guard</a>
        </li>
        <li>
          <a href="#">Dental Florosis</a>
        </li>
        <li>
          <a href="#">Mild Teeth Crowding</a>
        </li>
      </menu>
    </ul>
    <ul>
      <a href="how.html">How it Works</a>
    </ul>
    <ul>
      <a href="pricing.html">Pricing</a>
    </ul>
    <ul>
      <a href="about.html">About</a>
    </ul>
    <ul>
      <a href="gallery.html">Gallery</a>
    </ul>
    <ul>
      <a href="">
        <i ></i>
      </a>
    </ul>
  </div>
</section>