Search the Community

Hi all, Can anyone expand on this lesson link below but to add a submenu in the menu as well? I cannot get this to work. I need a submenu between links 2 and 3. I can get the submenu to show all the time, but not be active upon hover of Link 2. When a user hovers on Link 2, another submenu should pop out to the right with more dropdown links. Where have I gone wrong here? https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp My HTML <!--header code starts here--> <a class="btn" href="homepage"><i class="fa fa-home"></i></a> <a class="active" href="index.html">Index</a> <a class="active3" href="Updates">Updates</a> <!--dropdowncode starts --> <div class="dropdown"> <button class="dropbtn">Business Updates <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="Link1.htm">Buisness Plans</a> <a href="Link2.htm">Link2</a> <a href="submenu.htm">Submenu Link 1<i class="fa fa-caret-right"></i></a> <div class="dropdown-content2"> <a class href="Submenu2.htm">Submenu Link2</a> <a href="Submenu3.htm">Submenu Link 3</a> <a href="Submenu4.htm">Submenu Link 4</a> <a href="Submenu5.htm">Submenu Link 5</a> </div> <a href="Link3.htm">Link3</a> <a href="Link4.htm">Link4</a> <a href="Link5.htm">Link5</a> <a href="Link6.htm">Link6</a> <a href="Link7.htm">Link7</a> <a href="Link8.htm">Link8</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Construction Updates <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Buisness Plans</a> <a href="Link2.htm">Link2</a> <a href="Link3.htm">Link3</a> <a href="Link4.htm">Link4</a> <a href="Link5.htm">Link5</a> <a href="Link6.htm">Link6</a> <a href="Link7.htm">Link7</a> <a href="Link8.htm">Link8</a> </div> </div> <!--header code ends --> CSS /* MENU CODE STARTS*/ /* BUTTON*/ .btn { background-color: #333; float: left; border: none; color: white; padding: 8px 16px; font-size: 22px; cursor: pointer; } .search { background-color: #333; float: right; border: none; color: white; padding: 8px 16px; font-size: 22px; cursor: pointer; } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; color: #006666; font-weight: bold; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 12px; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Add a color to the active/current link */ .topnav a.active { background-color: #0B6121; color: white; } ul.a { list-style-type: none; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } /* Add a color to the OTHER active/current link */ .topnav a.active2 { background-color: #006666; color: white; } ul.a { list-style-type: none; } ul.b { list-style-type: none; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } ul.a { list-style-type: none; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } .topnav input[type=text] { border: 1px solid #ccc; } } /* Navbar container */ .navbar { overflow: hidden; background-color: #333; font-family: Helvetica; } /* Links inside the navbar */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button INHERIT COLOR */ .dropdown .dropbtn { font-size: 12px; font-family: helvetica, verdana, arial, helvetica, sans-serif; font-weight: bold; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a darkgrey background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: darkgrey; } /* Dropdown content (hidden by default) */ .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 (hidden by default) */ .dropdown-content2 { display: none; position: absolute; margin-top: 0px; margin-left: 320px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Text Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content2 { display: block; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .fa-caret-right{ float:right; }

I have studied HTML and CSS self-taught several times, but I forget everything. It's not for me. So I took Wordpress and chose OceanWP as the theme. I would like some customizations on the OceanWP theme, can I put a wish list on the forum? Thanks to W3school, I know what I would like.

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

Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="google.com">Menu1</a></li> <li><a href="http://www.gogle.com">**Menu2**</a></li> <li><a href="http://www.gogle.com/">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>

anyone have any recommendations? using overflow-y: auto for a long submenu, submenu closes when using scrollbar. trying to keep this all in CSS… .SubMenu.MenuLevel1 {max-height: 300px;overflow-y: auto;overflow-x: hidden;margin:0px;padding:0px;border:0px;}

So I have a standard two level menu in one php file that I show on all the pages on a website. The menus and submenus are nested <ul> elements. When you go to a page, I would like the submenu that includes that page to be open by default. And also to stay open if another submenu isn't hovered over. I think I can figure out the menu transformations. The part I need help on is finding the submenu that the active page is contained in so I can set that one to be open.