CODEWITHSUNDEEP
htmlcss
LibraryOfAlexandria
LibraryOfAlexandria

Reputation: 23

How do I get my dropdown menu to stay open when I'm not hovering the menu item?

Problem: I am making a dropdown menu in CSS for the first time and I'm having trouble displaying it. The current CSS I have makes it so that when I hover the "Projects" menu item in my navigation bar, the dropdown opens as it should, but when you go to select an option in the dropdown bar it disappears. This makes a lot of sense to me, as you stop hovering the "Projects" menu item, which is what has the display property attached to it. It is clearly doing what I am telling it to do, but I don't know a smart fix for this problem.

Attempts at a solution:

  1. I looked at other StackOverflow posts, but couldn't find any that gave me a solution. This is probably due to my ignorance and if I am pointed in the right direction I am sure I will find what I need.
  2. I added the display:block property when hovering any of the dropdown items, but that doesn't work unless you are quick enough to go from navigation menu item to dropdown item.

HTML Structure:

    <div>
      <nav class="navbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link to="/">Home</router-link></li>
          <li class="nav-item">
            <a href="">Projects</a>
            <ul>
              <li class="nav-item-dropdown">
                <router-link to="/pokemon">Pokemon</router-link>
              </li>
              <li class="nav-item-dropdown">
                <router-link to="/graphs">Graphs</router-link>
              </li>
              <li class="nav-item-dropdown"><router-link to="/data">Data</router-link></li>
            </ul>
          </li>
          <li class="nav-item">
            <router-link to="/contact">Contact</router-link>
          </li>
          <li class="nav-item"><img src="@/assets/github.png" id="logo" /></li>
          <li class="nav-item">
            <img src="@/assets/linkedin.png" id="logo" />
          </li>
        </ul>
      </nav>
    </div>

CSS:

.navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
}

.nav-link {
  text-decoration: none;
  color: white;
}


nav ul ul {
  position: absolute;
  list-style: none;
  top: 60px;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover > ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

li a {
  text-decoration: none;
  color: white;
}


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
}

Thank you for your time and help.

Upvotes: 0

Views: 58

Answers (2)

Yudiz Solutions
Yudiz Solutions

Reputation: 4449

Can you please check with the below code, hope it will work for you. When we are using an absolute position in any element we have to specify its parent as relative position after that we can modify the absolute element position as per our requirements.

Please refer to this link https://jsfiddle.net/bve8ok53/2/

.navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: red;
}


nav ul ul {
  position: absolute;
  list-style: none;
  top: 100%;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover > ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

li a {
  text-decoration: none;
  color: black;
}


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
}
  <div>
      <nav class="navbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link to="/">Home</router-link></li>
          <li class="nav-item">
            <a href="">Projects</a>
            <ul>
              <li class="nav-item-dropdown">
                <router-link to="/pokemon">Pokemon</router-link>
              </li>
              <li class="nav-item-dropdown">
                <router-link to="/graphs">Graphs</router-link>
              </li>
              <li class="nav-item-dropdown"><router-link to="/data">Data</router-link></li>
            </ul>
          </li>
          <li class="nav-item">
            <router-link to="/contact">Contact</router-link>
          </li>
          <li class="nav-item"><img src="@/assets/github.png" id="logo" /></li>
          <li class="nav-item">
            <img src="@/assets/linkedin.png" id="logo" />
          </li>
        </ul>
      </nav>
    </div>

Upvotes: 1

John
John

Reputation: 5335

Change position: absolute; to position: relative; in nav ul ul And I'm not sure if that "gap" between the menu and dropdown was intentional, but you can get it back by adding some px to the top Take a look:

.navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
}

.nav-link {
  text-decoration: none;
  color: white;
}


nav ul ul {
  position: relative;
  list-style: none;
  top: 80px;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

li a {
  text-decoration: none;
  color: white;
}


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
}
 <div>
      <nav class="navbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link to="/">Home</router-link></li>
          <li class="nav-item">
            <a href="">Projects</a>
            <ul>
              <li class="nav-item-dropdown">
                <router-link to="/pokemon">Pokemon</router-link>
              </li>
              <li class="nav-item-dropdown">
                <router-link to="/graphs">Graphs</router-link>
              </li>
              <li class="nav-item-dropdown"><router-link to="/data">Data</router-link></li>
            </ul>
          </li>
          <li class="nav-item">
            <router-link to="/contact">Contact</router-link>
          </li>
          <li class="nav-item"><img src="@/assets/github.png" id="logo" /></li>
          <li class="nav-item">
            <img src="@/assets/linkedin.png" id="logo" />
          </li>
        </ul>
      </nav>
    </div>

Upvotes: 1

Related Questions