Hello! I am working on creating a left-side aligned vertical menu and I’m finding several different ways of doing it but I’m having a lot of issues with getting one that works how I need it to. Most of them are actually a bit more complicated than I want I think, but I’m still pretty new to HTML/CSS so I’m having trouble getting it to work correctly. Basically I have 4 menu headers, each with multiple sub-menu’s below them. We want the sub-menu’s to always be there, so there is no need for collapsing. We do not what the menu headers to be a selectable item. This is where I tend to run into problems. It should basically look like the open About Us menu in the image below, except that you would not be able to collapse it or select About Us. What is the best way to go about this? I have seen using lists, simply using divs, using buttons, but I’m unsure of which path to take.
The usual way to make menus is with lists <ul> and when there is a hierarchy of menus and sub-menus, nested lists.
Eg:-
<nav class="mainmen">
<ul>
<li>About us <!-- Top list level item header -->
<ul> <!-- Sub-menu nested list -->
<li><a href="history">Our History</a></li> <!-- Second level menu item with link -->
<li><a href="team">Our Team</a></li>
</ul> <!-- End the sub-list -->
</li> <!-- End the first top level item -->
<li>Products <!-- ..and repeat -->
<ul>
<li><a href="monkey">Monkey Catchers</a></li>
<li><a href="squirrel">Squirrel Ticklers</a></li>
</ul>
</li>
<!-- and more of the same...-->
</ul>
</nav>
It may require wrappers on the top level headers for styling, but that’s the general nested list structure.
What specifically were you having problems with, the structure or the styling?
A little bit of both. I actually had almost this exact layout but I think what I was doing wrong was that I had a tags around my outer lists. Removing those and doing some CSS magic should take care of my problem I think. I’m not sure why I didn’t think of that! Thanks!
One other question. For the selectable options, is there a way for me to make the text not blue like a link when it is hovered on and instead have the entire box around it change to a specific color?
As @SamA74 said, you can style it however you want with CSS. If you are having problems getting the result you want, show us the code you’re using, so we can see where you’re going wrong.
I don’t usually do this as we like to see where you have got to but here’s a quick demo of the whole thing which I expect you to dissect and learn from rather than copy and paste
