I am struggling to align the navigation menu on the right side in the center of the header area, similar to what is done on cyberchimps.
https://i.sstatic.net/2OeJe.png
Additionally, I want the hover state to remain active on the BGA sub-menu when hovering over it. Any suggestions on how to achieve this?
I've noticed the use of "*" in CSS on some examples, is it still considered a good practice today?
I'm not confident in my current approach, so any advice or recommendations are highly appreciated.
@charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
background-color: #CCC;
}
@font-face{
src: url(assets/fonts/oswald-v16-latin-regular.ttf);
font-family: oswald;
}
/* ~~ The header is given a width of 100%.
It will extend the full width of the browser.
The rest of the layout will be fixed~~ */
header{
background-color: #004489;
min-width: 1024px;
height: 100px;
clear: both;
}
/*header::after {
content: '';
display: block;
clear: both;
}*/
.navWrapper{
max-width: 1100px;
margin: 0 auto;
}
nav{
float:right;
margin-top: 20px;
padding-right: 50px;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
nav ul li{
display: inline-block;
float: left;
position: relative;
}
nav ul li a{
display: block;
margin: 0;
padding: 10px 10px;
text-decoration: none;
font-family: oswald;
font-size: 25px;
color: #fff;
}
nav ul a:hover, nav ul a:active, nav ul a:focus{
background-color: #065BB0;
}
nav ul ul{
display: none;/**/
position: absolute;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:list-item;
}
nav ul ul li{
display: block;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
nav ul ul li a{
color:#242323;
background-color: #8ec6ef;
}
nav ul ul a:hover, nav ul ul a:active, nav ul ul a:focus{
color:#fff;
background-color: #065BB0;
}<body>
<header>
<div class="navWrapper">
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BGA</a>
<ul>
<li><a href="#">BOOKS</a></li>
<li><a href="#">COURSES</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
</body>