<!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>