Pedro Pedro - 3 months ago 11
HTML Question

how to make a ul same size as parent li?

I'm working a dropdown menu, but I'm having a problem with the size of inner

ul
I trying to make it the same size as the parent
li
.

Can somebody tell me what am i doing wrong?

Demo: https://jsfiddle.net/o9kkb1er/1/



*
{
margin: 0px;
padding: 0px;


}ul.topMenu
{
background: #111;
overflow: hidden;
}

ul.topMenu li
{
float: left;
list-style: none;
}

ul.topMenu li a
{
padding: 12px 15px;
display: block;
color: white;
text-decoration: none;
transition: .4s;
border-right: 1px solid #fff;
}

ul.topMenu li:first-child a
{
border-left: 1px solid #222222;
}





ul.topMenu li a:hover, ul.topMenu li a:focus
{
background: black;
}

ul.topMenu ul
{
position: absolute;
background: #222;
}

ul.topMenu ul li
{
float: none;
}

<ul id="topMenu" class="topMenu">
<li><a href="#">Sed ut perspiciatis </a>
</li>
<li><a href="#">Nemo enim </a>
<ul>
<li><a href="#">Sit amet </a>
</li>
<li><a href="#">Excepteur </a>
</li>
<li><a href="#">Neque </a>
</li>
</ul>
</li>
<li><a href="#">Neque porro </a>
</li>
<li><a href="#">Ut enim ad </a>
</li>
<li><a href="#">Quis autem vel eum </a>
<ul>
<li><a href="#">Sit amet </a>
</li>
<li><a href="#">Excepteur </a>
</li>
<li><a href="#">Neque </a>
</li>
</ul>
</li>
</ul>




Answer

Notes:

  • In order to make your ul element as wide as its li parent, you have to change its position to position: relative, so that you can use width: 100%.

  • Then you have to remove overflow: hidden from ul.topMenu and set a fixed height. Setting height: 42px will do fine.

Code:

ul.topMenu ul {
    position: relative;
    width: 100%;
}

ul.topMenu {
    height: 42px;
}

jsFiddle:here.

Snippet:

* {
  margin: 0px;
  padding: 0px;
}

ul.topMenu {
  background: #111;
  height: 42px;
}

ul.topMenu li {
  float: left;
  list-style: none;
}

ul.topMenu li a {
  padding: 12px 15px;
  display: block;
  color: white;
  text-decoration: none;
  transition: .4s;
  border-right: 1px solid #fff;
}

ul.topMenu li:first-child a {
  border-left: 1px solid #222222;
}

ul.topMenu li a:hover,
ul.topMenu li a:focus {
  background: black;
}

ul.topMenu ul {
  position: relative;
  background: #222;
  width: 100%;
}

ul.topMenu ul li {
  float: none;
}
<ul id="topMenu" class="topMenu">
  <li><a href="#">Sed ut perspiciatis </a></li>
  <li><a href="#">Nemo enim </a>
    <ul>
      <li><a href="#">Sit amet </a></li>
      <li><a href="#">Excepteur </a></li>
      <li><a href="#">Neque  </a></li>
    </ul>
  </li>
  <li><a href="#">Neque porro </a></li>
  <li><a href="#">Ut enim ad </a></li>
  <li><a href="#">Quis autem vel eum </a>
    <ul>
      <li><a href="#">Sit amet </a></li>
      <li><a href="#">Excepteur </a></li>
      <li><a href="#">Neque  </a></li>
    </ul>
  </li>
</ul>

Comments