CSS only menu with li in full width and submenu
HTML
<ul>
<li><a href="#">link</a>
<ul>
<li><a href="#">link</a></li>
<li style="padding-left: 10px;"><a href="#">link</a></li>
<li style="padding-left: 20px;"><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<ul>
<li><a href="#">link</a></li>
<li style="padding-left: 10px;"><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<ul>
<li><a href="#">link</a></li>
<li style="padding-left: 10px;"><a href="#">link</a></li>
<li style="padding-left: 20px;"><a href="#">link</a></li>
<li style="padding-left: 30px;"><a href="#">link</a></li>
</ul>
</li>
</ul>
CSS
ul {
width: 90%;
margin: 0;
padding: 0;
list-style: none;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
background: #555;
color: white;
height: 40px;
}
ul li a:hover {
background: yellow;
color: black;
}
/* SUBMENU */
ul li ul {
display: none;
position: absolute;
margin-left: 10px;
}
ul li ul li {
display: block;
width: 171px;
}
ul li:hover ul {
display: block;
}
ul li ul li:before {
content: '';
position: absolute;
margin-left: -10px;
width: 0;
height: 0;
border-top: 20px solid #555;
border-left: 5px solid transparent;
border-right: 5px solid #555;
border-bottom: 20px solid transparent;
}
ul li ul li:hover:before {
content: '';
border-color: yellow yellow transparent transparent;
}
ul li ul li:after {
content: '';
position: absolute;
margin: -40px 0 0 175px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 5px solid #555;
border-right: 5px solid transparent;
border-bottom: 20px solid #555;
}
ul li ul li:hover:after {
content: '';
border-color: transparent transparent yellow yellow;
}