Jump to content

Help with HTML/CSS Dropdown Navbar Sub-menus


Recommended Posts


I am in the process of replacing an old menu on a website and came across the W3Schools menu guides.  I have recreated most of the menu using the example and code on the 'Drop down menu in NavBar' page (https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp) and I am really pleased with how it is coming along.

However, my HTML and CSS skills are quite limited and I am stuck on two things that I am hoping someone here can help me with.

I have done a few searches on these forums but not found quite what I am looking for or something that fits with what I have done so far and I cannot see an example on this site that achieves what I am trying to do.

I need to add some sub-menus to the drop down items.  For example, in the code given on the above page, the 'Dropdown' menu has three items, Link 1, Link 2 and Link 3.  I need to find out how to have Link 1 (for example) provide access to another list of items, e.g.  Link 1a, Link 1b, Link 1c etc..

Ideally, I would like this sub-menu to appear to the right of the source item.

This also leads the second thing I have not been able to work out, but I think is probably a lot simpler.  On the menu item that links to a sub-menu, I would like to put a right-arrow to show that a sub-menu is available.  Whilst I can put the arrow on the item, I have not yet worked out how to right-align the arrow so, at the moment, it appears immediately after the menu item name.

I have seen mention on some forum posts about li items and child-items but this appears to relate to different types of code for the menu in general and not what I have used so far.  If it isn't possible to do this using the current method, I am happy to change to something else and any pointers, or links to example code would be much appreciated.

Thanks in advance for any help anyone can offer.




Edited by DNA10000
Link to comment
Share on other sites

1 hour ago, dsonesuk said:

Generally with the arrow, you would add  padding to the right enough for arrow with enough spacing for text away from that arrow, then use position absolute to position it in that area.

Thanks.  Can you elaborate on how I would do that please?  My HTML/CSS is pretty basic.

At the moment, I have the following HTML for a drop-down list where Item 1 should branch to a sub-menu.

<div class="dropdown-content">
    <a href="#">Item 1 <i class="fa fa-caret-right"></i></a>
    <a href="#">Item 2</a>

I have the following code in the CSS for dropdown-content:

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;

Would I need to create new classes specifically for those items where I want them to branch to a sub-menu?

Would the padding etc. be placed in the CSS or the HTML?  If it goes in the CSS, how would I apply this to only those items where I need sub-menus and not to all items?


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...