I have a query - can I create a full-width dropdown menu within a wrapper that has a width of 1024px (with contents centered on the screen)? My dropdown menu is causing some issues. Although the hover effect is not functioning yet, I am still working on styling the dropdown menu.
Below is the code snippet:
#lower-header {
background-color: #ffffff;
height: 100px;
position: relative;
width: -webkit-fill-available;
z-index: 1;
img {
float: left;
margin-top: 33px;
}
ul {
list-style: none;
display: block;
float: left;
margin: 17px 0px;
padding-left: 30px;
li {
display: inline-block;
font-size: 17px;
font-weight: bold;
padding: 16px 19px;
height: 73px;
.sub-menu-whole {
background-color: #ffffff;
height: 360px;
z-index: 1;
margin-top: 44px;
&:after {
content: "";
display: table;
clear: both;
}
div {
position: absolute;
margin: -33px 0;
padding: 0;
div {
float: right;
}
}
}
a {
text-decoration: none;
color: #000000;
&:hover {
color: red;
}
}
}
}
}<div id="lower-header">
<div class="wrapper">
<img src="images/logo/logo_01.png">
<ul>
<li>
<a href="#">KU Startup</a>
<div class="sub-menu-whole">
<div>
<img src="images/bg/bg_sub_01.png">
</div>
<div class="column">
<ul>
<li>
<a>Introduction</a>
</li>
<li>
<a>Startup Department Overview</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Program</a></li>
<li><a href="#">Startup Leader</a></li>
<li><a href="#">Startup Incubation</a></li>
<li><a href="#">Startup Mentors</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
</div>