Steps for setting up a Subnav within a Subnav Code. In this article,

Looking to enhance the bootstrap 4 navbar with multiple subnavs? Check out this code example from W3Schools

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
.... (code continues) ....

I want to add an extra arrow down (fa-caret) to "About -> Company". Specifically, I'd like it to be structured as About -> Company -> Admin, Accounting, Etc. I attempted to nest the "subnav" classes together but it didn't work. How can I achieve nested "subnav" classes?

Here's an example of the desired structure: https://i.sstatic.net/ZPPvB.png

The goal is to have the second horizontal line with Admin, Accounting, Etc only visible when clicking on the + next to Company. I tried modifying the code as shown below, but unfortunately, the second horizontal line remains visible at all times:

<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
  <button class="subnavbtn">Company <i class="fa fa-plus-square "></i></button>
    <div class="subnav-content">
        <a href="#">Admin</a>
        <a href="#">Accounting</a>
        <a href="#">Etc</a>
    </div>
  <a href="#team">Team</a>
  <a href="#careers">Careers</a>
</div>
htmlcssbootstrap-4navbar

Answer №1

<!DOCTYPE html>
    <html lang="en">
        <body>
            <style>
                #menu {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                }
                
                #menu li {
                    display: block;
                    position: relative;
                    float: left;
                    background-color: #24af15;
                }
                
                #menu li a {
                    display: block;
                    padding: 0;
                    width: 200px;
                    text-decoration: none;
                    line-height: 35px;
                    color: #ffffff;
                }
                
                #menu li li a {
                    font-size: 80%;
                }
                
                #menu li:hover {
                    background-color: #003f20;
                }
                
                #menu ul {
                    position: absolute;
                    padding: 0;
                    left: 0;
                    display: none;
                }
                
                #menu li:hover ul ul {
                    display: none;
                }
                
                #menu li:hover ul {
                    display: block;
                }
                
                #menu li li:hover ul {
                    display: block;
                    margin-left: 200px;
                    margin-top: -35px;
                }
            </style>
                <ul id="menu">
                    <li><a href="#">Primary Item 1</a></li>
                    <li><a href="#">Primary Item 2</a>
                        <ul>
                            <li><a href="#">Sub Item</a></li>
                            <li><a href="#">Sub Item</a></li>
                            <li><a href="#">SUB MENU »</a>
                                <ul>
                                    <li><a href="#">Sub Menu Item 1</a></li>
                                    <li><a href="#">Sub Menu Item 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Primary Item 3</a></li>
                </ul>
        </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Django auto-fill using the primary key on the page

Is there a way to automatically select the id or (pk) of an employee's page when adding documents to their profile through a form? Any suggestions for a solution would be greatly appreciated! view.py def createDocument(request): forms = documentF ...

pythonhtmldjango

Using jQuery to assign a color attribute to a link by adding a class

My issue revolves around a collection of dynamically generated classes, each associated with a specific color. Take the following example class: .magenta { color: #7abbb8; } In my footer, there are several links that I want to inherit this class when ...

jquerycsscolorshyperlinkaddclass

How to right-align navigation bar text using Bootstrap 4

I'm attempting to replicate Google's layout but I'm having trouble aligning the list elements to the right of the page using Bootstrap 4. I've included a link to the code I am working on, and even tried adding the classes mr-auto and ju ...

cssbootstrap-4

If the children contain multiple div elements in jQuery

Is there a way to determine the number of divs inside a li element? Below is the code I've tried, but it's not functioning as expected. (The issue is that every img receives the class, even when there's only 1 div inside the li.) if($(&apo ...

jqueryhtmlcss

Adjusting the text size within the graphdracula library

I recently implemented a cool feature in my asp.net mvc4 application by adding a treeview using the graphdracula jQuery library. Here is a snippet of the code I used: <html> <head> <script type="text/javascript" src="~/Content/Scripts ...

jqueryasp.net.netcssasp.net-mvc-4

Utilize MySQL to populate highcharts with data

Learning the ropes of web programming, I have a personal project to monitor expenses. Simply put, my database stores data on total expenditures for this month and last month. I am able to display it manually (via echo), but I'm struggling to pass the ...

phphtmlmysqlhighcharts

Issues arise when trying to integrate iframes with Ionic and AngularJS, as they

Using iframes in my ionic app to display webpages within the application has presented a challenge. This is what I currently have implemented: <iframe class= 'webPage' name= "eventsPage" ng-src="{{object.url}}"></iframe> The issue ...

angularjshtmliframeionic-framework

Preventing Double Click Events on jQuery Spinner

I have been working on an option picker, but now there is a new requirement to make the options configurable. While this shouldn't be too difficult, I am facing some issues with the option picker: Currently, when an item is double-clicked, it will ge ...

javascriptjqueryhtml

Executing a click event on an input element using Angular

Currently, I am looking to create a custom upload button as an alternative to using the standard HTML upload button. Is there a way for me to trigger a click event on the input element in order to manually open the file browser? <div class="upload-bu ...

angularhtml

Creating a Piechart in Kendo UI that is bound to hierarchal remote data

I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories. <!DOCTYPE html> <html> ...

javascripthtmlkendo-uipie-chart

Is it causing issues having the same version of jQuery included multiple times?

Within my HTML file, referred to as x.html, I've included other HTML files as well. In x.html, I have integrated the jquery library version 1.4.1. It seems that this same version of jquery is also being included from the other HTML files. Even though ...

javascriptjqueryhtml

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

What is the best way to remove the default outline in the <img> tag?

<img class="image_cover" src = "" /> .image_cover { width:25px; height:25px; border-style:none; border: 0; box-shadow:none; } Showing an example in a live demo on jsfiddle Encountering an issue in Chrome Version 33.0.1750.152, ...

htmlcss

Does the padding attribute get passed down in CSS?

Hi there! I've been working on the following code snippet: .blah { padding: 15px; background:green; } .blah div{ background:red; } <div class='blah'> <div> foo </div> & ...

css

Developing a form using ASP.NET with dual models

I am currently using Visual Studio 2017 with all the latest updates installed. I am facing a challenge where I need to create a form with text box answer questions and a checkbox answer question, and then store all the answers in a single database entry. M ...

c#htmlasp.net-mvcrazor

Adjust the CSS border to finish at a 90-degree angle rather than a 45-degree angle

The div I'm working with has unique colors for the border-bottom and border-right properties, creating a diagonal line that separates the box at a 45 degree angle. I'm looking to adjust the bottom-border to be shorter in order for the right bord ...

htmlcss

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

javascripthtmlreactjsnext.jschatbot

Implementing a Comment Section on Your Website with HTML and JavaScript

Currently in the process of setting up my static webpage, and looking to incorporate user comments. I have already written the comment script using HTML, but I am unsure how to write the JavaScript necessary to display the comments beneath each post. Any ...

javascripthtml

Radiant UI: Radio Button featuring a stylish svg circle

Hey everyone, I’ve been attempting to customize the Material-UI radio button using CSS modules but haven’t had much luck. It seems like the easiest solution would be to use the makeStyles function from Material-UI, however, I am required to work with C ...

cssreactjsmaterial-ui

CSS: Stack elements vertically based on their height (column-wise)

Looking for some help with designing a menu where the list items float in columns instead of rows. For example, This is how my current menu looks like: I want to change the layout to look like this: My code for the list items is as follows: .mnu-third ...

htmlcss