<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MENÚ HORIZONTAL FLEX</title>
<style type="text/css">
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
}
li { flex-grow: 1; }
a {
	display:block;
	padding:1em;
	background-color:LightGray ;
	text-align:center;
	margin-bottom:0.2em;
	text-decoration:none;
	color:#000000;
}
a:hover {background-color:LightCoral; }
</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>
