Creación de un menú horizontal con sub menú desplegable mediante CSS

*{margin:0;padding:0;box-sizing:border-box;font-size:0;}  
nav a{
      text-decoration:none;
      color:inherit;
      font-size:14px;
      }
            
nav li{
      display:inline-block;
      width:150px;
      height:30px;
      padding:5px 10px;
      background-color:#000;
      border:1px solid #000;
      text-align:center;
      color:#fff;
      position:relative;
}
            
nav li:hover{
      background-color:#fff;
      color:#000;
      }
            
nav li>ul{
      display:none;
      }

nav li:hover>ul{
      display:block;
      position:absolute;
      top:30px;
      left:0px;
}

Sería muy interesante que en tu navegador tengas abiertas 2 ventanas.

En la primera esta lectura. En la segunda el ejemplo de menú horizontal para poder comparar el código. Hay muchas similitudes pero algunas diferencias importantes.

Por ejemplo:

• El ancho de los elementos <li> en la resolución que presento ya no se define en porcentajes. Esto es así porqué en sub menú tomaría como referencia una medida pequeña y lo que queremos es que los elementos inline-block se apilen unos debajo de otros.
• Los elementos <li> tienen ahora un posicionamiento relativo. De este modo podremos trabajar el sub menú mediante posicionamiento absoluto.

Fijaros en los selectores nav li>ul y nav li:hover>ul.

El primero indica aquellos elementos ul directamente después de un li. Esto es el sub menú al que se le da la propiedad display:none.

Sin embargo cuando pasamos el ratón por encima de cualquier <li> que directamente después tenga un <ul>, que el <ul> pase a ser de tipo display:block o inline-block.

Finalmente el elemento <ul> contenido dentro de un li pasa a mostrarse pero debemos darle un posicionamiento absoluto referenciado respecto de su <li>. Exactamente deberemos desplazarlo la altura del elemento <li>. Puesto que en los estilos genéricos del documento le hemos dado la propiedad box-sizing:border-box; sabemos seguro que la altura es la que indiquemos con la propiedad height. En el caso del ejemplo exactamente 30px.