As I begin, I want to mention that I have thoroughly reviewed all the sub sub menu questions, but unfortunately, I couldn't find anything that aligns with the code I currently have in place. Any assistance will be greatly appreciated.
My current task involves adding a sub sub menu. Initially, I thought I had it all figured out, but I'm facing some challenges with understanding how to make the child combinators function. If you could focus on that aspect of the code, you'll make it to my 'saint list.'
Additionally, the issue I'm encountering is that the sub sub menu fails to extend to the right and appear next to its parent element as intended. I hope this explanation makes sense.
You can preview the fiddle here.
Below is the CSS:
/*------------------------- Header ---------------------------*/
#header {
background: #333 url(../images/bg-header2.png) repeat-x;
height:184px;
margin:15px 0 0;
}
#header div {
margin:0 auto;
padding:28px 0 0;
position:relative;
width:500px;
}
#header div ul {
height:118px;
left:10px;
list-style:none;
margin:0;
overflow:visible;
padding:0;
position:absolute;
top:10px;
float: left;
width: 500px;
}
/* Rest of the CSS code follows... */
Here is the HTML:
<div id="header">
<div>
<ul>
<li> <a href="index.html">Home</a>
</li>
<li class="selected"> <a href="portfolio.html">Portfolio</a>
<ul>
<li> <a href="fantasy.html">Fantasy</a>
</li>
<li> <a href="makeup.html">Makeup</a>
<ul>
<li><a href="glamour.html">Glamour Makeup</a>
</li>
/* More HTML code continues... */
</ul>
</li>
/* More HTML code continues... */
</div>
</div>
Any assistance provided will be highly appreciated. Thank you for your time and consideration. :)