I'm trying to figure out how to create a menu that complies with the latest standards of HTML and CSS. I put together this code but was informed that using float is generally not recommended nowadays. However, I'm unsure of the reasons behind this and what would be the best practice for controlling/positioning the menu. Can someone provide guidance on this?
#header {
width: auto;
height: auto;
border-bottom: 1px solid #d2d2d2;
}
#main_logo {
width: 200px;
float: left;
padding: 8px 0px 0px 20px;
}
nav {
float: right;
}
.ul-menu {
display: flex;
}
.ul-menu li {
display: inline;
padding: 42px 20px 41.7px 20px;
background-color: var(--brand-color-second);
transition: background-color 0.24s linear;
/* fade-in effect on menu hover */
border-left: 1px solid #d2d2d2;
}
.ul-menu li a {
text-decoration: none;
font-size: 0.86rem;
color: #757575;
letter-spacing: 2.5px;
font-family: var(--secondary-font);
}
.ul-menu li:hover {
/* background-color: #48763b; */
/* ISSUE WITH HOVER: how can we make the entire li a link when hovering instead of just the href? */
background-color: var(--brand-color-main);
color: #fff;
border-bottom: 1px solid var(--brand-color-main);
}
.ul-menu li:hover a {
color: #fff;
}<header>
<div id="header">
<div id="main_logo">
<a href="index.html"><img src="img/logo.png" alt="logo"></a>
</div>
<nav class="main-menu">
<button class="toggle-btn">Menu</button>
<ul class="ul-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- header -->
<div style="clear:both"></div>
</header>