The Codesee The Codesee - 5 months ago 11
CSS Question

Hidden <ul> vanishes while hovering between <li> to it

Below I have a hidden

<ul>
which appears when the
<li>
'More' is hovered over.

Due to the margin of the
<li>
, the
<ul>
dissapears when hovering between 'Extras' and the
<ul>
- how do I prevent this from happening?



#container ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#container li {
color: #fff;
width: 80px;
height: 60px;
float: left;
line-height: 60px;
margin: 10px;
background: black;
}
#container li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}

<div id="container">
<div class="center" style="text-align: center; display: inline-block;">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>




Answer

Your ul tag is not getting height. Here try this

#container ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  float:left;
  width:100%;
}
#container li {
  color: #fff;
  width: 80px;
  height: 60px;
  float: left;
  line-height: 60px;
  margin: 10px;
  background: black;
}
#container li a {
  display: block;
}
.extras:hover > ul.hidden {
  display: block;
}
ul.hidden {
  display: none;
}
<div id="container">
  <div class="center" style="text-align: center; display: inline-block;">
    <nav>
      <ul class="nav">
        <li>Example 1</li>
        <li>Example 2</li>
        <li class="extras">More
          <ul class="hidden">
            <li>Hoverable</li>
            <li>Hoverable</li>
            <li>Hoverable</li>
          </ul>
        </li>
        <li>Example 3</li>
        <li>Example 4</li>
      </ul>
    </nav>
  </div>
</div>

Comments