How do I create a navigation bar with dual sides?

I currently have a navigation bar implemented with the following code.

* {
   margin:0px;
   padding:0px;
}
#bs-example-navbar-collapse-1 ul {
   list-style:none; 
}
#bs-example-navbar-collapse-1 ul li { 
   width:150px;
   line-height:50px;
   text-align: center ;
   float:left;
   color:grey;
   font-size:14px;
   position:relative;
}
#bs-example-navbar-collapse-1 ul ul {
   display:none; 
}
#bs-example-navbar-collapse-1 ul li:hover > ul { 
   display:block;
}
#bs-example-navbar-collapse-1 ul ul ul {
   margin-left:150px;
   top:0px;
   position:absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page-top" class="index">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Back to Top</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" href="#page-top">Home</a></li>
                    <!-- START OF APPLE SECTION  -->
                    <li> Apple
                        <ul>
                            <li><a href="">Apple iphone 7 plus</a></li>
                            <li><a href="">Apple iphone 7</a></li>
                            <li><a href="">Apple iphone 6s plus</a></li>
                            <li><a href="">Apple iphone 6s</a></li>
                            <li><a href="">Apple iphone 6 plus</a></li>
                            <li><a href="">Apple iphone 6</a></li>
                            <li><a href="">Apple iphone SE</a></li>
                            <li><a href="">Apple iphone 5S</a></li>
                            <li><a href="">Apple iphone 5C</a></li>
                            <li><a href="">Apple iphone 5</a></li>
                            <li><a href="">Apple iphone 4S</a></li>
                            <li><a href="">Apple iphone 4</a></li>
                            <li><a href="">Apple iphone 3GS</a></li>
                            <li><a href="">Apple iphone 3G</a></li>
                        </ul>
                    </li>
                    <!-- START OF SAMSUNG SECTION  -->
                    <li><a class="page-scroll" href="">samsung</a></li>
                    <!-- START OF HUAWEI SECTION  -->
                    <li><a class="page-scroll" href=".">huawei</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

However, I wish for it to function similarly to this website:

Upon hovering over 'Apple' in the above website, a drop-down menu with 3 list items appears. How can I replicate this functionality?

htmlcssdrop-down-menu

Answer №1

* {
  margin:0px;
  padding:0px;
}
#bs-example-navbar-collapse-1 ul {
  list-style:none; 
}
#bs-example-navbar-collapse-1 ul li { 
  width:150px;
  line-height:50px;
  text-align: center ;
  float:left;
  color:grey;
  font-size:14px;
  position:relative;
}
#bs-example-navbar-collapse-1 ul ul {
  display:none; 
}
#bs-example-navbar-collapse-1 ul li:hover > ul { 
  display: block;
  width: 600px;
  float: left;
}

#bs-example-navbar-collapse-1 ul ul ul {
  margin-left:150px;
  top:0px;
  position:absolute;
}
#bs-example-navbar-collapse-1 ul li ul li {
  width: auto;
  line-height: 50px;
  text-align: left;
  float: none;
  color: grey;
  font-size: 14px;
  position: relative;
}
#bs-example-navbar-collapse-1 ul li:hover > ul div {
  width: 33%;
  float: left;
}
h2 {
  text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page-top" class="index">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Naar boven</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" href="#page-top">Home</a></li>
                    <!-- FROM HERE APPLE STARTS  -->
                    <li> Apple
                        <ul>
                            <div>
                                <h2>title</h2>
                                <li><a href="">Apple iphone 7 plus</a></li>
                                <li><a href="">Apple iphone 7</a></li>
                                <li><a href="">Apple iphone 6s plus</a></li>
                                <li><a href="">Apple iphone 6s</a></li>
                                <li><a href="">Apple iphone 6 plus</a></li>
                                <li><a href="">Apple iphone 6</a></li>
                            </div>
                            <div>
                                <h2>title</h2>
                                <li><a href="">Apple iphone SE</a></li>
                                <li><a href="">Apple iphone 5S</a></li>
                                <li><a href="">Apple iphone 5C</a></li>
                                <li><a href="">Apple iphone 5</a></li>
                                <li><a href="">Apple iphone 4S</a></li>
                            </div>
                            <div>
                                <h2>title</h2>
                                <li><a href="">Apple iphone 4</a></li>
                                <li><a href="">Apple iphone 3GS</a></li>
                                <li><a href="">Apple iphone 3G</a></li>
                            </div>
                        </ul>
                    </li>
                    <!-- FROM HERE samsung STARTS  -->
                    <li><a class="page-scroll" href="">samsung</a></li>
                    <!-- FROM HERE huawei STARTS  -->
                    <li><a class="page-scroll" href=".">huawei</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

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

Discover the art of customizing child elements using vanilla extract!

I recently started using vanilla extract to add styles to a NextJS application. Is there a way to style child elements within the parent element without having to create another class? My React component has a structure like this: <ul className={style ...

cssnext.jsvanilla-extract

Injecting AngularJS directives and styling elements into the body section of a Twig template using the {% block body %} tag

I'm currently in the process of constructing a Rest API using Symfony 3 and Fosresbundle, with AngularJS responsible for fetching JSON data within twig templates. However, I've encountered an issue where I need to specify angularJS directives an ...

angularjshtmltwigsymfony

Is it possible to utilize an if statement to select a specific Bootstrap modal?

How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...

javascriptphphtml

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first ...

htmlcssfonts

Troubleshooting: Unable to fetch CSS file in Node.js Express framework

I'm trying to access my .html file with localhost using node.js, but I'm facing an issue with loading the CSS that is included in the file. I am using the express framework for this purpose. Code: var express = require('express'); var ...

cssnode.jsexpress

Bidirectional binding of attributes in an Angular directive

I have developed a custom Angular Directive known as evoEventMirror. Its main purpose is to attach a jQuery event to an inserted element and apply a specified CSS style to the "root" element. Refer to the example below: <div id="#mydiv" evo-event-mirro ...

jquerycssangularjsbindingangularjs-directive

Is there a way to append the current path to a link that leads to another URL?

I am currently in the process of separating a website, with the English version being on the subdomain en. and the French version residing on the www. Before making this change, I have a drop-down menu that allows users to select their preferred language ...

javascriptphpjqueryhtml

Imagine a complex JSON structure with multiple levels of nesting

Take a look at this JSON data : { department_1 : [{ id : 1, name = Joe Smith, email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660c150b0f120e2613150048030213">[email protected]</a>}, ...., { id : 500, name ...

javascriptcssjsonresponsive-designdata-visualization

Specify the title attribute by using a language-based string

Can the title attribute content on an image be defined as a language string that can be overridden in a multilingual website? I am considering following this format: <img title="tooltip_mod".....> Creating a tooltip_mod INI file that defi ...

htmlimageattr

Issue with Braintree drop-in form: Nonce string generation problem

I've encountered a peculiar issue while trying to utilize the dropin form from Braintree. Successfully integrating the form into a view, here's how it looks: <form id="createTransactionForm" method="post" action="#&qu ...

javascripthtmlasp.net-mvcformsbraintree

Is it possible to change button behavior based on input values when hovering?

Currently, I am attempting to create a webpage where users can input two colors and then when they press the button, a gradient of those two colors will appear on the button itself. <!doctype html> <html> <head> <script src=&apos ...

javascripthtmlcss

Ways to consistently return to the main home URL/directory within an HTML document

Greetings to all! Currently facing a challenge with HTML pathing. I want to ensure that every time I log out from Dynamics CRM Portals, I am redirected back to the "SignIn" page. The issue arises when I am in various URLs. For example, logging out from d ...

htmldynamics-365adxstudio-portalsdynamics-crm-portals

Find the item in the pop-up window

When removing a user from my list, a JavaScript popup pops up prompting to confirm the action with two buttons "OK" / "Annuler" : https://i.sstatic.net/BEdH2.png Is there a way to use Selenium to find and interact with these buttons? ...

javascripthtmlselenium-webdriver

CSS creates gaps between each of the internal elements inside the HTML document

I'm looking to create a 4px space between all internal components within my HTML, regardless of direction (top, bottom, left, or right). I have attempted to achieve this by using an external CSS file with the following code: body { padding: 2p ...

htmlcss

Tips for integrating bootstrap code within PHP tags

<?php $con=mysqli_connect("localhost","root","","testdatabase"); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $result = mysqli_qu ...

phphtmlsqlbootstrap-4

Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?

I've designed a sleek navbar located at the bottom of my webpage featuring a central logo leading to the home page, with two links on each side directing users to specific pages. Using @media CSS, I made it responsive by reducing its size as the scree ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

What is the best way to remove the background from a button that uses -moz

After adding the select component to my page, I noticed a problem with the select button in Firefox. In Chrome, the arrow down button looks normal, like this, but in Firefox it appears differently, as shown in this image. How can I remove the background ...

htmlcssfirefox

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

Go to a different page section using MUI 5

I am currently working on a React application and I want to implement a functionality where pressing a button on my Nav Bar will navigate to a specific section on the first page. To achieve this, I have created an onClick function for my button: const onNa ...

javascripthtmlcssreactjsmaterial-ui

I'm currently troubleshooting why the radio buttons in my form seem to be coming up as undefined

I am currently working on a form and trying to validate it using my own code. Even though I can successfully retrieve values for radio buttons by triggering an alert when clicked, the form validator keeps returning these radio values as undefined. What cou ...

jqueryhtmlformsvalidation