<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MENÚ HORIZONTAL FLEX</title>
<style type="text/css">
ul {
background-color: #d0e4fe;
list-style-type:none;
margin:0;
padding:0;
display:flex;
flex-direction: column;
}
li { flex-grow: 1; }
a {
display:block;
padding:1em;
background-color:#FFA500 ;
text-align:center;
margin-bottom:0.2em;
text-decoration:none;
font-family: "Arial";
font-size: 20px;
color:blue;
}
a:hover {background-color:Lightgreen; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
</ul>
</nav>
</body>
</html>