Necesito que el menú ocupe todo el ancho para que no se vean esos bordes en blanco y también en la parte de arriba. ¿Qué solución sencilla existe?
.menu {
display: flex;
background: #333;
}
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
li {
position: relative;
}
li > ul {
display: none;
position: absolute;
background: #333;
}
li ul ul {
left: 100%;
top: 0;
}
li:hover > ul {
display:block;
}
.menu__item {
flex: auto;
}
a {
color: #fff;
text-decoration: none;
display: block;
text-align: center;
padding: .5em;
white-space: nowrap;
}
<ul class="menu">
<li class=menu__item>
<a class=menu__link href="#">Item 1</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
</ul>
</li>
<li class=menu__item>
<a class=menu__link href="#">Item 2</a>
</li>
<li class=menu__item>
<a class=menu__link href="#">Item 3</a>
</li>
<li class=menu__item>
<a class=menu__link href="#">Item 4</a>
</li>
<li class=menu__item>
<a class=menu__link href="#">Item 5</a>
</li>
<li class=menu__item>
<a class=menu__link href="#">Item 6</a>
</li>
</ul>