web/CSS/Menu déroulant

<style>
/* menu horizontal ===========================================================*/
nav {font-family:monospace;}
ul {
	background:#4f5249;
	list-style:none;
	margin:0;
	padding-left:0;
	clear:both;
	width:100%;
}
li {
	color:#fff;
	background:#4f5249;
	display:block;
	float:left;
	position:relative;
	text-decoration:none;
	transition-duration:0.2s;
}
li span, nav ul li a{
	padding:1rem;
	display:block;
	color: #fff;
}
li:hover {
	background:#bab491;
	cursor:pointer;
}

ul li ul {
	visibility:hidden;
	opacity:0;
	min-width:5rem;
	position:absolute;
	left:0;
	display:none;
}
ul li:hover > ul,
ul li ul:hover {
  visibility:visible;
  opacity:1;
  display:block;
}
ul li ul li {
	clear:both;
	width:170px;
}
ul li ul li {padding:0px 16px}
</style>

    <nav role="navigation">
      <ul>
        <li><span>Notes</span></li>
         <li><span>Map</span></li>
        <li><span>Raids</span>
          <ul>
            <li><a href="#">Andorre</a></li>
            <li><a href="#">Nice</a></li>
            <li><a href="#">Vars</a></li>
            <li><a href="#">Vosges</a></li>
            <li><a href="#">Vosges Nordwind</a></li>
          </ul>
        </li>
      </ul>
    </nav>