I have a question, is it possible to have a full width dropdown menu when my wrapper has a width of 1024 px? Because I am having problems with my dropdown menu. Though, it is not yet working with the hover but Im still trying to style my dropdown menu.
Here's my code..
from my index.html
<div id ="lower-header"> <div class="wrapper"> <img src="images/logo/logo_01.png"> <ul> <li> <a href="#">KU 스타트업</a> <div class="sub-menu-whole"> <div> <img src="images/bg/bg_sub_01.png"> </div> <div class="column"> <ul> <li> <a>인사말</a> </li> <li> <a>창업부서소개</a> </li> </ul> </div> </div> </li> <li><a href="#">프로그램</a></li> <li><a href="#">스타트업 리더</a></li> <li><a href="#">창업보육</a></li> <li><a href="#">창업멘토단</a></li> <li><a href="#">커뮤니티</a></li> </ul> </div> </div>
This is my CSS code: style.scss
#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; /*position: absolute;*/ 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; } } } }
#html #css