dropdown menu inside button

by zoho

HTML

<!-- button 作为菜单似乎有问题，这种方法在 chrome 中可以，但在 firefox 中往下移动光标时菜单就消失了，而在 ie 中甚至无法显示子菜单。如果将 button 改为 span 就正常了。-->
<button class="dropdown-toggle">
    More
    <ul class="dropdown-menu">
        <li>abc</li>
        <li>def</li>
        <li>hjk</li>
    </ul>
</button>
<span class="dropdown-toggle">
    More
    <ul class="dropdown-menu">
        <li>abc</li>
        <li>def</li>
        <li>hjk</li>
    </ul>
</span>

CSS

button {
    -moz-appearance: none;
    border: 0px;
    outline: none;
    margin-bottom: 0px;
}
.dropdown-toggle {
  position: relative;
}

.dropdown-toggle > .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
  padding: 0px;
  margin: 0px;
  border: 1px solid gray;
  border-radius: 4px;
}

.dropdown-toggle:hover > .dropdown-menu {
  display: inline-block;
}

.dropdown-menu li {
  list-style-type: none;
  padding: 0 .5em;
  margin: 0;
  line-height: 2;
  color: black;
  background: white;
}

.dropdown-menu li.hover {
  color: white;
  background: #3069B6;
}