Having Trouble with the Dropdown Submenu in Bootstrap

Could someone assist me in getting this dropdown menu to function properly? I am trying to make it so that when the "Program" menu is clicked, a dropdown submenu will appear. I have inserted some code for it, but unfortunately it's not working. Just to clarify, I am using the bootstrap framework.

#sidebar-wrapper{
    z-index:  1;
    position: absolute;
    width:  230px;
    height:  100%;
    overflow-y:  hidden;
    background: #2b6698;
    opacity: 0.9;
}

#sidebar-wrapper h2{
    color: white;
    padding-left: 30px;
}

.sidebar-nav{
    padding:  0;
    list-style: none;
    margin-top: 30px;
}

.sidebar-nav li{
    text-indent: 13px;
    line-height: 40px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.sidebar-nav li a::after{

    font-family: FontAwesome;
    content:  '\f0d7';
    float: right;
    padding-right: 20px;

}

.sidebar-nav li a{
    display:  block;
    text-decoration: none;
    color:  #FFF;
    padding: 5px 0 5px 0px;
    font-size:13px;
    outline:none;
}

.sidebar-nav li a:hover{
    background: #1F496C;
}

.sidebar-nav > .active{
     background: #1F496C;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
    <h2> Dashboard </h2>
        <ul class="sidebar-nav dropdown">
            <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg move"></i>Program</a></li>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
        </ul>
    </div>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

To modify your HTML slightly and integrate Bootstrap JS file, make sure to add the following link:

- Below is the modified HTML -

<div id="sidebar-wrapper">
    <h2> Dashboard </h2>
        <ul class="sidebar-nav dropdown">
            <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg move"></i>Program</a>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul></li>
            <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
        </ul>
    </div>

CSS

Make sure to add the following CSS snippet to your style sheet.

#sidebar-wrapper .dropdown-menu {
     position: relative; 
     float:none;
     background-color:#1F496C;
}

For a demonstration, you can view the working fiddle: https://jsfiddle.net/rituagrawal01/1b8b8avs/

Thank you!

Answer №3

Rectify this. The ul tag must encapsulate the li tags.

<ul class="sidebar-nav dropdown">
  <li class="active">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-user fa-lg move"></i>Program
    </a>
    <ul class="dropdown-menu">
       <li><a href="#">HTML</a></li>
       <li><a href="#">CSS</a></li>
       <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</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

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...

javascripthtmlgamepad-api

Troubles with submitting jQuery validation plugin via AJAX

Whenever I try to use the jQuery validation plugin for validating a form within a Bootstrap modal, the validation does not work and the form cannot be submitted. This is the code for the Bootstrap modal form: <div class="modal fade" id="form-content" ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

htmlcssformstwitter-bootstrap-3centering

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

javascriptjqueryhtmlcss

Is there a way to adjust the size of the canvas element in HTML without compromising quality or resorting to zooming?

I'm currently working on a basic modeling application for the web. The main component of my app is a canvas element that I'm trying to size correctly. However, when I set the height and width using CSS, it scales the entire canvas and compromises ...

javascripthtmljquerycsscanvas

Why is my JavaScript code running but disappearing right away?

I've encountered an issue with the code I wrote below. It's supposed to display the user's names when they enter their name, but for some reason, the names keep appearing and disappearing immediately. What could be causing this problem? Her ...

javascripthtmlfunctionreturn

What is the best way to select the child of the second-to-last child?

In the structure of my HTML code, I have an unordered list with a class "menu" containing several list items and corresponding anchor tags like this <ul class="menu"> <li> <a href="#1"></a> </li> <div&g ...

javascriptjqueryhtml

Tips for enabling unrestricted unencoded HTML in XmlNode or XmlElement with XmlSerializer

Looking for a solution to generate an XML element that can handle a string of text containing HTML or other valid XML elements. Here's an example: "Test text with <strong>custom nodes</strong> that shouldn't be encoded" I've at ...

c#htmlxmlxml-serializationxmlserializer

flawless approach to showcasing visual content

I am a beginner in css. My goal is to showcase my images in an optimal way This is the HTML code I have: <div id="photos"> <h3>Title of the Photo</h3> <P class="like"><a href="#">Give it a Like</a& ...

htmlcss

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

I have a dropdown with two options: Indian and Others. When I select Others, I want to display three textboxes - two with date pickers and one with a simple text input field. I have tried writing the following HTML code but I am unable to get the date pick ...

javascriptjqueryhtml

Content and footer being covered by the sidebar

I have an illustration here to help explain my issue. The problem I am facing is that the Sidebar is overlapping both my Content and Footer when the content consists of only small items. In my _layout file, I'm referencing the sidebar like thi ...

asp.netcssasp.net-mvc-3razor

Problem encountered while attempting to sort a table with JavaScript and jQuery

Having trouble sorting my table by the content in the first column. I've tried implementing code similar to the one found in this ANSWER, but unfortunately, it's not working as expected for me. When you run the snippet, you can see that the table ...

javascriptjqueryhtmlsorting

Achieving full page height with div, iframe, and footer components

Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...

csshtmliframe

Exploring the Features of Bottom and Right in jQuery

Here is a snippet of jQuery code that I included in a sample program: $('#left').click(function(){ $('.box').animate({ left: "-=40px", }, function(){/* End of Animation*/}); }); $('#right ...

jquerycss

How can I address the variations in CSS appearance between Firefox and Google Chrome?

I'm currently working on a table with two cells in each row just for fun. For the first row, I want both cells to display the same picture. To achieve this, I wrote the following CSS: tr:nth-child(1){ background-image:url("cat.jpg"); background-size: ...

htmlcssgoogle-chromefirefox

Chrome browser rendering image as PHP/CSS/HTML web navigation bar

I've hit a snag while working on my small website. The navigation of the website is functioning properly in Internet Explorer, but in Google Chrome, it's not clickable. Initially, I thought the issue might be related to the background image of ...

phphtmlcss

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

I am in the process of creating a basic HTML page with two sections, each containing content. However, the last content within the second .right div is extending to the bottom of the page, causing it to become scrollable. I attempted to create another div ...

htmlcss

What is the best method to display each HTML output on a separate line using Python?

As a beginner, I am working on a small project involving webscraping. My goal is to print the lyrics of a song with each line on a separate line using Beautiful Soup in Python. However, the output I'm getting looks like this: I looked out this mornin ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...

javascriptcssreactjsreact-nativereact-redux