My dropdown menu disappear so fast!

HTML-CSS
1

Is the problem lies within html code? I debug for whole day but still couldn’t get it :face_vomiting:
Please help me !!
My react code is as below:

<nav>
                <ul id="MenuItems">
                  <li><Link to="">Home</Link></li>
                  <li><Link to="/">Services</Link></li>
                  <li><Link to="">About</Link></li>
                  {
                    userInfo ? (
                      <li>
                      <div className="dropdown">
                        <Link to="#">
                          {userInfo.name} <i className="fa fa-caret-down"></i>{' '}
                        </Link>
                        <ul className="dropdown-content">
                          <li>
                            <Link to="#signout" onClick={signoutHandler}>
                              Sign Out
                            </Link>
                          </li>
                        </ul>
                      </div>
                      </li>
                    ) : (
                  <li><Link to="/signin">Sign In</Link></li>
                    )
                  }  
                  <li><Link to="">Contact</Link></li>
                </ul>
              </nav>

My css code is as below:

nav{
  flex: 1;
  text-align: right;
}
nav ul{
  display: inline-block;
  list-style-type: none; 
}

nav ul li{
  display: inline-block;
  margin-right: 20px;
}
/* Dropdown */
.dropdown  {
  display: inline-block;
  position: relative;
}
.dropdown-content {
  position: absolute;
  display: none;
  right: 0;
  min-width: 10rem;
  padding: 12px 16px;
  z-index: 1;
  background-color: #ffd6d6;
  margin: 0;
  margin-top: 0.4rem;
  border-radius: 0.5rem;
  transition: delay 10s;
}
.fa.fa-caret-down{
  font-size: 24px;
  margin-right: 10px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
2

for what i can tell you added transition to .dropdown-content but the :hover is on .dropdown.
so maybe if you put do .dropdown-content:hover and set the properties you want might work

3

I’ve tried but it isn’t working T.T
Do you think the problem is in html?

4

yeah, where you’re trying to set the :hover is within <link></link>. you should be using instead of <link>
<a href=""></a>
so in the css you’ll set the :hover to a

HTML

<li><a href="#" to="/signin">Sign In</a></li>

CSS

a {
  text-decoration: none;
  background: lightblue;
  padding: 1rem;
  transition-delay: 1s;
}

a:hover {
  background: pink;
}

i set these properties as an example obviously :laughing:

5

I’ve considered to use <a href>, but in my other React screen I already use a lot of <Link to=''>, it might be better to tally those links. After debugging I think the problem is in the userInfo? ()
Not sure it is about parenting problem in <ul> and <li>

6

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
7

Not entirely sure what you mean by it “disappear so fast” but I guess you mean you can’t move the mouse to the menu before it closes?

The space created by the top margin on .dropdown-content is likely causing that. You can try making the “name” link block or inline-block and then use bottom padding on it instead of top margin on .dropdown-content.

Just as an aside. I assume the Link component is from React Router (or Reach Router, or some other React routing library).