Experiencing an issue with the left side menu bar in Bootstrap, looking to incorporate additional sub menu items

<li class="drop-menu-tab">
    <a class="dropmenu" ><i class="icon-folder-close-alt"></i><span> Employee</span></a>
        <ul>
            <li><a class="submenu" href="<?php echo base_url(); ?>emp/fulltime"><i class="icon-edit"></i><span class="hidden-tablet">Full Time</span></a></li>                                  
            <li id="mainmenulink"><a class="submenu" href="<?php echo base_url(); ?>emp/parttime"><i class="icon-edit"></i><span class="hidden-tablet"> Part Time</span></a></li>
             <li id="dayshiftlink"><a class="subsubmenu" href="<?php echo base_url(); ?>emp/dayshift"><i class="icon-edit"></i><span class="hidden-tablet"> Day Shift</span></a></li>
            <li id="nightshiftlink"><a class="subsubmenu" href="<?php echo base_url(); ?>emp/nightshift"><i class="icon-edit"></i><span class="hidden-tablet"> Night Shift</span></a></li>
        </ul>   
</li>

I am trying to add more sub menus...

For example:

Employee > Full Time > Day Shift 
Employee > Full Time > Night Shift

I have attempted this in various ways, but I am not getting the desired result of tabs opening and closing properly. Any suggestions for a possible script?

For your information: Utilizing "Bootstrap v2.3.1"

htmlcssbootstrap-4

Answer №1

You made a typo error when writing <span>; it was written as <spanc>

Correct it to 

<span> Employee</span>

To obtain the desired output, you can modify the following code:

li{
  list-style: none;
}
ol.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "\003e";
}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class=""><a href="#">Employee </a></li>
    <li class=""><a href="#">Full Time</a></li>
    <li class="" aria-current="page">Day Shift</li>
  </ol>
  <ol class="breadcrumb">
    <li class=""><a href="#">Employee </a></li>
    <li class=""><a href="#">Full Time</a></li>
    <li class="" aria-current="page">Night Shift</li>
  </ol>
</nav>

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

Error: AJAX encountered an unexpected token

An error message has appeared stating: Uncaught SyntaxError: Unexpected token : This error relates to the following line of code: data: userCoupon: $('#couponCode').val(), Here is the script in question: $(function() { $("#signInButton2"). ...

javascriptjqueryhtmlajaxpost

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

jqueryhtmlcssslider

Clearing HTML Text Input Box When User Presses Enter

Currently, I am working on a lengthy program that is functioning almost flawlessly. However, there is one persistent issue: whenever I hit the Enter key while the text box is clicked, it clears the box and appends the data to the URL as if it were a GET re ...

htmltextboxenter

Arrangement of tables using HTML and CSS on the outdoor patio

Looking for advice on how to align buttons in the last column of a table outside of the table but in the same row. The attached image shows the current layout: https://i.sstatic.net/Ex5AR.png ...

htmlcssbootstrap-4html-table

Error in ASP.NET MVC: Float input causing incorrect value submission

Today I encountered an issue with the number input in an HTML form. I am attempting to receive a float input from the user. To achieve this, I have utilized the following Input tag (apologies for the mix of English and German): <input asp-for="TBE_ ...

c#htmlasp.net-mvcforms

Tips on incorporating animations into a class design?

I'm trying to figure out how to make an image disappear by adding a class However, when I try this, the element vanishes without any animation I'd like it to fade away slowly instead I've heard there are CSS3 properties that can help achi ...

htmlcss

What could be causing my website to function flawlessly in Firefox but not in Chrome or Internet Explorer?

Hey everyone, I'm feeling lost and have been comparing files using DiffNow. I don't have any code to offer because I'm unsure of where to even begin. The website is coded in php/html/mysql/jquery. Here are my main concerns: -Animations are ...

phpjqueryhtmlcss

How to prevent page refresh when hitting enter in jQuery form?

Currently, my form does not refresh the page when I click the button to submit it. However, if I press Enter while a text input is selected, the page will refresh. Is there a way to make pressing Enter on the text input perform the same action as clicking ...

javascriptphpjqueryhtmlajax

Aligning elements of unknown width within a container of a specified width

Currently struggling to find a resolution to the following issue: Trying to create a navigation bar using a ul element set to a specific width of 530px with multiple li items nested inside. The goal is to have the li items evenly fill the 530px width wit ...

htmlcsslayoutwidthcentering

Optimal selection of selectors for every type of button in an HTML document

In my current setup, I am utilizing the following selectors: input[type="button"], input[type="submit"], input[type="reset"], button Do you think this is a comprehensive selection of selectors to cover all potential buttons on a website? ...

cssselector

Guide on incorporating the Chain Pattern alongside the Self Revealing Module Pattern within JavaScript

I have come across the following code snippet: filtersManager = (function ($) { var that = this; function initialize() { // some tasks return that; }; function execute() { // some tasks return that; ...

javascriptjqueryhtmlmodule-pattern

Getting the badge value of a button in Angular JS is a simple process that involves accessing

How can I retrieve the badge value of a Button? This badge represents data-text-as-pseudo-element and I am new to Angular. Can someone guide me on how to achieve this? <style type="text/css">[data-text-as-pseudo-element]::before { content: ...

htmlcssangularjs

Unexpected behavior from HTML5 number input field

Is there a way to prevent users from entering values outside the specified max and min attributes? The constraints work when using the arrows in the input field, but not when typing directly into it. Note: I am considering utilizing angularjs for this fun ...

angularjshtml

I'm curious about where to find more information on this new technology called the 'scroll to page' feature

Recently, I came across a captivating website feature that caught my eye. As someone relatively new to front end web development, I am intrigued by the scrolling technique used on this site. I'm specifically drawn to the 'page to page' scro ...

javascriptjquerycssfrontend

Encountering undefined JavaScript functions when called from HTML

I had most of these functions working perfectly, but after restarting my program, I'm now encountering issues with undefined functions in Chrome. I can't pinpoint the exact problem, and even though I've checked through Eclipse, I still can&a ...

javascripthtml

I'm currently attempting to search for a city using AngularJS, but I'm encountering some difficulties

Please take a look at this example on Plunker and let me know if you see any issues: Plunker Example ...

htmlangularjs

What is the best way to create a reset button for a timing device?

Is there a way to reset the timer when a button is clicked? Having a reset button would allow users to revisit the timer multiple times without it displaying the combined time from previous uses. Check out this code snippet for one of the timers along wit ...

javascripthtmlbuttontimerrestart

How can you easily make a div scroll vertically in the Android Browser?

Important Note: While similar questions have been asked before, it's important to consider that the mobile web is constantly evolving. The discussions from a few years ago may no longer be relevant due to updates and changes in technology. I am curre ...

csshtmlscrollandroid-browser

The select dropdown default choice is not appearing as expected

My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...

htmlcssangular

Displaying React components using Bootstrap in the navigation bar

I'm feeling a little stuck here. I'm currently working with React Bootstrap and the Navigation component. One of the routes in my application is the dashboard, which is only accessible after logging in. When a user navigates to the dashboard, I ...

javascriptcsstwitter-bootstrapreactjsreact-bootstrap