Drop Down menu puro Css

by kseso

HTML

<nav id="menu_gral">
  <ul>
    <li><a href="#">Opción 1</a>
        <ul>
	        <li><a href="#">Opción 1.1</a></li>
	        <li><a href="#">Opción 1.2</a></li>
	        <li><a href="#">Opción 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 2</a>
        <ul>
	        <li><a href="#">Opción 2.1</a></li>
	        <li><a href="#">Opción 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 3</a></li>
    <li><a href="#">Opción 4</a>
        <ul>
	        <li><a href="#">Opción 4.1</a></li>
	        <li><a href="#">Opción 4.2</a></li>
	        <li><a href="#">Opción 4.3</a></li>
        </ul>
    </li>
  </ul>
</nav>

CSS

* {
    margin: 0;
    padding: 0;
    border: o none;
    position: relative;
}
#menu_gral {
    font-family: verdana, sans sherif;
    width: 80%;
    margin: 1.5rem auto;
}
#menu_gral ul {
    list-style-type: none; 
    text-align: center;
    font-size: 0;
}
#menu_gral > ul li {
    display: inline-block;
    width: 25%;
    position: relative;
    background: #FF7361;
}
#menu_gral li a {
    display: block;
    text-decoration: none;
    font-size: 1rem;
    line-height: 2.5rem;
    color: #444;
}
#menu_gral li:hover a, #menu_gral li a:focus {
    background: #8DA889;
    color: #fff;
}

#menu_gral li ul {
    position: absolute;
    width: 0;
    overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 100%;
    margin: 0 -4rem -4rem -4rem;
    padding: 0 4rem 4rem 4rem;
    background:  #bbb;
    z-index: 5;
}
#menu_gral li li {
    display: block;
    width: 100%;
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    font-family: monospace;
    font-size: .9rem;
    line-height: 1.7rem;
    border-top: 1px solid #e5e5e5;
    background: #444;
}
#menu_gral li li a:hover, #menu_gral li li a:focus {
    background: #8AA9B8; 
}