Ten en cuenta que no puedes hacer :hover
sobre un elemento que esta oculto, en tu caso estas apuntando el :hover
sobre el li
que has iniciado como oculto
<style>
.menu a:hover + ul {
background-color:red;
display: block;
}
.menu ul{
display:none;
position:absolute;
min-width:140px;
}
</style>
Yo ocultaría el ul
y apuntaria el :hover sobre el <a>
que esta visible siempre y sobre todo porque es un elemento hermano y se encuentra antes que el elemento que quieres modificar, regla imprescindible.
EDITO:
En caso de que no quieras que la lista se sobreponga a lo que hay debajo, quita el position:absolute;
, quedando finalmente asi:
<style>
.menu a:hover + ul {
display: block;
}
.menu ul{
display:none;
min-width:140px;
}
</style>