Untitled

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
    display: flex;
    float: right;
}

li
{
    display: inline;
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #bbb;
}

a
{
    text-decoration: none;
    color: black;
}


li:hover
{
    background-color: orange;
}

#titre
{
	padding: 3px;
	border: 1px solid black;
	display: inline;
}


</style>
</head>
<body>
    <ul>

		<li><a href="accueil.html" id="color_grey">Recettes</a></li>
		<li><a href="infos.html"  >Evenement</a></li>
		<li><a href="contact.html" id="color_grey">Catalogue</a></li>
		<li><a href="login.html" id="color_red">Blog</a></li>
	</ul>
</body>
</html>