The method for inserting a nested dropdown within another dropdown

I am struggling to add an additional drop-down menu to my navigation bar. How can I place a new one on top of the existing menu?

<ul class="menu">
                <li>
                    Toggle navigation
                    <ul class="submenu">
                        <li>CUSTOM SIGNS</li>
                        <li>DIGITAL PRINTING</li>
                        <li>SERVICES</li>
                    </ul>
                </li>
                <li role="presentation">
                    <a href="# untitled.html" id="getanestimate">get an estimate</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">industry showcase <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a href="services.html">Price Package</a></li>
                        <li role="presentation"><a href="#">Order Services</a></li>
                        <li role="presentation"><a href="#">Custom Request</a></li>
                    </ul>
                </li>
                <li role="presentation"><a href="#untitled.html">gallery</a></li>
                <li role="presentation"><a href="contact.html">about us </a></li>
            </ul>

cssdrop-down-menunavbar

Answer №1

Look what I stumbled across on Stack Overflow, this link might be helpful for you!

Give it a click here

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
  <div class="container-fluid">
    <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
    <a href="#" class="brand">Project name</a>
    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a href="#">More options</a>
              <ul class="dropdown-menu">
                <li><a href="#">Second level link</a></li>
                <li><a href="#">Second level link</a></li>
                <li><a href="#">Second level link</a></li>
                <li><a href="#">Second level link</a></li>
                <li><a href="#">Second level link</a></li>
              </ul>
            </li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form action="" class="navbar-search pull-left">
        <input type="text" placeholder="Search" class="search-query span2">
      </form>
      <ul class="nav pull-right">
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li class="dropdown">
          <a class="#" href="#">Menu</a>
        </li>
      </ul>
    </div><!-- /.nav-collapse -->
   </div>
 </div>
</div>

<hr>

<ul class="nav nav-pills">
   <li class="active"><a href="#">Regular link</a></li>
   <li class="dropdown">
   <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
   <ul class="dropdown-menu" id="menu1">
     <li class="dropdown-submenu">
      <a href="#">More options</a>
      <ul class="dropdown-menu">
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
      </ul>
    </li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
 </ul>

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

Is the PNG image displaying poorly in the IE10 browser?

My application features a PNG image with actual dimensions of 300px X 300px. I am using a 20% scale of this image as an input image button, which displays correctly in Mozilla and Chrome browsers. However, in IE, the image appears distorted. Please refer t ...

htmlcssinternet-explorer

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

I have been attempting to overlay my navbar on top of a background image by nesting it within a div and using absolute positioning. However, I've run into an issue where the navbar-header/navbar-brand section causes the rest of the navbar to wrap onto ...

htmlcsstwitter-bootstrap

Is there a way to make a text area move along with the mouse cursor?

I have been working on my first website and everything is running smoothly so far. However, I have a new idea that I am struggling to implement. Some of the pages on my site feature a video player with buttons to select different videos. When a viewer hove ...

javascriptjqueryhtmlcss

What is the functionality of {all: initial} and how does it address issues with default values?

Why do paragraphs inherit properties like line-height and text-align from the div element? If values for these properties are: normal -> for line-height [i.e. font-size = 16px (initial / default value) * normal (value is usually around 1.2 -> 19.2 ...

htmlcssinheritanceline-height

Toggle between displaying and concealing content by clicking or hovering the mouse

I have a button that is positioned at the top of the browser. I want to show a dropdown list when the user clicks or hovers over this button. HTML <div class="translator"> <div class="translate-btn">Translator</div> <div class="t ...

jqueryhtmlcss

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

I am dealing with a layout issue where headlines should be displayed next to floated images if there is enough space, and drop below the images if not. Unfortunately, I do not have access to the HTML code, so I need to solve this problem purely through CSS ...

cssresponsive-designmedia-queries

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

The problem of a static click function not working when clicked on a link. What is the solution for this

Details I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ). My Problem: When I click on the link, my slidesho ...

javascriptjquerycssperformanceflickity

Tips for smoothly transitioning between two division elements:

I currently have two different div elements on my webpage: <div id="#content1"> <div id="divWelcome" style="margin-top:50px;"> <div id="headerimg" style="position: relative;"> <div style="position: absolute; bo ...

jqueryhtmlcss

Styling elements in a React component with CSS to give each item a unique look

My React component, called "Badge", returns text that has bold styling. render() { return ( <div> <Text weight={'bold'}> {this.props.label} </Text> </div> ) Now, I am using the "Badge" component within ano ...

cssreactjs

When importing data from a jQuery AJAX load, the system inadvertently generates duplicate div tags

Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent()) The issu ...

javascriptjqueryhtmlcssajax

Triumph Diagrams featuring numerous lines and interactive tooltips

While working on a graph that requires zooming and displaying tooltips for each data point, I encountered an issue with overlapping tooltips when adjusting the data set in Victory's documentation. I came across VictoryPortal as a solution to this prob ...

cssreactjsvictory-charts

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...

htmlcssformstwitter-bootstrapvalidation

Utilize LI styling exclusively for a specific section of the website

Is it possible to style LI items with padding and bullet points only when they are inside the <div class="article-content"> element without affecting other ul/li styles on the website such as the navigation menu? Thank you for your help! .article-co ...

htmlcss

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

I haven't coded for a while and my knowledge of JavaScript is still in its early stages, so please excuse me if this question seems a bit naive. Essentially, I've created code that filters an HTML table based on the items in the first column. Th ...

javascripthtmljquerycss

What could be causing jQuery.css() to not function properly?

I've been encountering some challenges with a piece of code and haven't been able to make it function as intended. I'm relatively new to JavaScript/jQuery, so bear with me as I navigate through this learning process. As part of the Free Cod ...

javascriptjquerycss

Resize a circle upon hovering while keeping the same thickness of the border

I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesh ...

csscss-transitionscss-transforms

What is the best way to layer multiple navigation menus on top of each other using z-index?

I'm facing a challenge trying to position or overlap two navigation menus in my project. The technologies I am using are Bootstrap, HTML, and CSS. It seems like I might need to utilize the z-index property, but I'm unsure about the exact impleme ...

htmlcssz-index

What is the correct method for rotating a cell by -90 degrees?

Trying to rotate text at a -90 degree angle in a header column from a cell. Using the code found here: CSS rotate text - complicated The outcome is shown below: When I rotate, the text does not resize and I want all of it to be on the same line (EXAMENES ...

htmlasp.netcss

CSS designed for small-screen laptops is also being utilized on iPads running Safari

To specifically target the iPad/Safari browser and accommodate some minor differences in appearance compared to windows/linux browsers, we are implementing the following HTML meta tag and style query: <meta name="viewport" content="width=device-width, ...

cssipadsafari