Currently facing a challenge with creating a drop-down navigation bar in HTML and CSS. Initially, struggled with setting submenus to the same width as the buttons they drop down from. Resorted to setting them to width:100% and the unordered list to position: relative which fixed the issue. However, encountered a new problem where all the links from the bar also drop down when submenus expand. To better understand the issue, view the fiddle here (Hover over Chapter or Tech Ed to see the problem). It seems like whenever one problem gets resolved, another one surfaces. Any insights on what is missing?
HTML:
<body>
<div id="wrapper">
<div id="headercont">
<div id="navmain">
<ul>
<li class="link_nav"> <a class="title_nav" href="">Home</a></li>
<li class="link_nav"> <span class="title_nav">Chapter</span>
<ul class="sub">
<li> <a href="">About</a></li>
<li> <a href="">Officers</a></li>
<li> <a href="">Advisor</a></li>
<li> <a href="">News</a></li>
</ul> </li>
<li class="link_nav"> <span class="title_nav">Tech Ed</span>
<ul class="sub">
<li> <a href="">Classes</a></li>
<li> <a href="">Teachers</a></li>
</ul> </li>
<li class="link_nav"> <a href="">Design Brief</a></li>
<li class="link_nav"> <a href="">About</a></li>
</ul>
</div>
</div>
</div>
</body>
CSS:
#wrapper {
width: 900px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
position: relative;
}
#header #mainnav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#mainnav ul .nav_link {
float: right;
width: 10%;
list-style-type: none;
}
#wrapper #mainnav {
color: #2B3A42;
}
#wrapper #headercont {
display: inline-block;
margin-left: auto;
margin-right: auto;
float: left;
}
#navmain ul .link_nav {
list-style-type: none;
display: inline-block;
}
#wrapper #headercont #navmain {
height: 30px;
width: 900px;
background-color: #151C23;
margin-left: auto;
margin-right: auto;
display: inline-block;
float: left;
margin-top: auto;
margin-bottom: auto;
}
#headercont #navmain ul {
padding: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 0px;
}
ul .link_nav a {
text-decoration: none;
color: #D9E5E8;
font-size: 22px;
padding-left: 30px;
padding-right: 30px;
}
.title_nav {
text-decoration: none;
color: #D9E5E8;
font-size: 22px;
padding-left: 40px;
padding-right: 40px;
width: 100px;
position: relative;
}
.sub {
display: none;
list-style-type: none;
position: relative;
}
ul .link_nav:hover {
background-color: #D9E5E8;
}
ul .link_nav:hover .title_nav {
color: #151C23;
}
ul .link_nav:hover .sub{
display: block;
background-color: #5C6E90;
}
.sub li:hover {
background-color: #D9E5E8;
}
.sub li:hover a{
color: #151C23;
}
.sub li {
width: 100%;
}