HTML CSS hover dropdown menu unexpected behavior

Question

My code is supposed to realize the hover dropdown effect only using CSS. However, the transition between two lists in the menu is not fluent at all. The menu jumps from one sub menu to a main one.

I was wondering if there's any solution to this "jumping" effect.

body {
  overflow: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #B3000000;//f1f1f1;
  position: absolute;
  right: 0;
  top: 80px;
  cursor: pointer;
}
li a {
  display: block;
  color: #000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
  position: relative;
}
/* Change the link color on hover */

ul li a:hover {
  background-color: #000;
  color: white;
}
ul li ul.dropdown {
  width: 200px;
  background-color: #B3000000;//f1f1f1;
  display: none;
  position: relative;
  right: 0;
  top: 0%;
}
ul li:hover ul.dropdown {
  display: block;
  /* Display the dropdown */
}
ul li ul.dropdown li {
  display: block;
}

<ul>
  <div class="dropdown">
    <li><a href="#about">About &#9662;</a>
      <ul class="dropdown">
        <li><a href="#">Staff</a>
        </li>
        <li><a href="#">History</a>
        </li>
        <li><a href="#">Our Mission</a>
        </li>

      </ul>
    </li>
    <li><a href="#Contact">Contact</a>
      <ul class="dropdown">
        <li><a href="#">Employee Contacts</a>
        </li>
        <li><a href="#">Corporate Contacts</a>
        </li>
        <li><a href="#">Join Our Team</a>
        </li>
      </ul>
    </li>

  </div>
</ul>

get the inspiration here: bradsknutson.com/blog/css-only-accordion — moped
– moped, Commented Jun 23, 2016 at 2:31

Sagar Kodte · Accepted Answer · 2016-06-23 05:02:43Z

I changed your HTML because directly inside a <ul> or <ol> element, you can only have <li> elements and other <ul> or <ol> elements. All other tags need to be inside of <li>'s.

nav {
    display:inline-block;
}
.nav ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
    
}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    position:relative;
}
.nav a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    color:#000;
    text-decoration:none;
}
.nav a:hover {
    text-decoration:none;
    background:#000;
    color:#fff;
}

.nav li ul li {
    width:200px;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:#000;
    color:#fff;
}
.nav li ul {
    position:relative;
    left:0;
    z-index:1;
}
.nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 500ms ease-in;
    -moz-transition:height 500ms ease-in;
    -o-transition:height 500ms ease-in;
    transition:height 500ms ease-in;
}
.nav ul > li:hover ul li {
    height:36px;
}

<nav class="nav">
    <ul>
        <li>
            <a href="#">About &#9662;</a>
            <ul>
                <li><a href="#">Staff</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Our Mission</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul>
                <li><a href="#">Employee Contacts</a></li>
                <li><a href="#">Corporate Contacts</a></li>
                <li><a href="#">Join Our Team</a></li>
            </ul>
        </li>
    </ul>
</nav>

Jimmy Mccune · Accepted Answer · 2016-06-24 13:08:01Z

body {https://m.facebook.com/story.php?story_fbid=10153683429737621&substory_index=0&id=178395412620 
  overflow: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #B3000000;//f1f1f1;
  position: absolute;
  right: 0;
  top: 80px;
  cursor: pointer;
}
li a {
  display: block;
  color: #000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
  position: relative;
}
/* Change the link color on hover */

ul li a:hover {
  background-color: #000;
  color: white;
}
ul li ul.dropdown {
  width: 200px;
  background-color: #B3000000;//f1f1f1;
  display: none;
  position: relative;
  right: 0;
  top: 0%;
}
ul li:hover ul.dropdown {
  display: block;
  /* Display the dropdown */
}
ul li ul.dropdown li {
  display: block;
}

<ul>
  <div class="dropdown">
    <li><a href="#about">About &#9662;</a>
      <ul class="dropdown">
        <li><a href="#">Staff</a>
        </li>
        <li><a href="#">History</a>
        </li>
        <li><a href="#">Our Mission</a>
        </li>

      </ul>
    </li>
    <li><a href="#Contact">Contact</a>
      <ul class="dropdown">
        <li><a href="#">Employee Contacts</a>
        </li>
        <li><a href="#">Corporate Contacts</a>
        </li>
        <li><a href="#">Join Our Team</a>
        </li>
      </ul>
    </li>

  </div>
</ul>

nav {
    display:inline-block;
}
.nav ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
    
}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    position:relative;
}
.nav a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    color:#000;
    text-decoration:none;
}
.nav a:hover {
    text-decoration:none;
    background:#000;
    color:#fff;
}

.nav li ul li {
    width:200px;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:#000;
    color:#fff;
}
.nav li ul {
    position:relative;
    left:0;
    z-index:1;
}
.nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 500ms ease-in;
    -moz-transition:height 500ms ease-in;
    -o-transition:height 500ms ease-in;
    transition:height 500ms ease-in;
}
.nav ul > li:hover ul li {
    height:36px;
}

<nav class="nav">
    <ul>
        <li>
            <a href="#">About &#9662;</a>
            <ul>
                <li><a href="#">Staff</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Our Mission</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul>
                <li><a href="#">Employee Contacts</a></li>
                <li><a href="#">Corporate Contacts</a></li>
                <li><a href="#">Join Our Team</a></li>
            </ul>
        </li>
    </ul>
</nav>

Could you explain what you changed and why? Right now it's a game of spot-the-difference.

Collectives™ on Stack Overflow

HTML CSS hover dropdown menu unexpected behavior

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related