I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly?
nav {
display: inline-block;
width: 600px;
float: right;
text-align: right;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 15px;
}
nav a {
font-size: 15px;
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #BEBEBE;
}
.header {
background-color: #1A5694;
width: 810px;
height: 52px;
border-radius: 5px 5px 0px 0px;
}
.headerconnexion {
float: right;
width: 100px;
margin: 13px 13px 0px 0px;
}
.headerconnexion a {
color: #B3D1FA;
text-decoration: none;
}
.logo {
width: 10%;
margin: 13px 0px 0px 20px;
}<div class="header">
<a href="index.php">
<img class="logo" src="http://image.noelshack.com/fichiers/2016/08/1456571967-facebook-logo-png-transparent-background.png" />
</a>
<nav>
<ul>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
<li><a href="index.php">Link toast</a></li>
</ul>
</nav>
</div>