Jump to content
DNA10000

Help with HTML/CSS Dropdown Navbar Sub-menus

Recommended Posts

Hi

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.

David

 

 

Edited by DNA10000

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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>
</div>

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?

 

Share this post


Link to post
Share on other sites

That's great, I hadn't found that example, thanks.

Hopefully I can tweak it to behave similar to the other example I have based my current design on.

Cheers
David

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...