My dropdown menu disappear so fast!

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:

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

My css code is as below:

  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;
  font-size: 24px;
  margin-right: 10px;
.dropdown:hover .dropdown-content {
  display: block;

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

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

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


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


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

a:hover {
  background: pink;

i set these properties as an example obviously :laughing:

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>

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.

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

1 Like

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