Unable to create a navigation bar dropdown menu

Need help with creating a dropdown menu in the navigation bar. Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="index.html">Home</a>
    </li>
    <li><a href="technology.html">tech</a>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">case <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li role="presentation"><a role="menuitem" href="#">In</a>
        </li>
        <li role="presentation"><a role="menuitem" href="#">Out</a>
        </li>
      </ul>
    </li>

    <li><a href="staff.html">staff</a>
    </li>
    <li><a href="gallery.html">gallery</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>

I am trying to create a dropdown menu for "case," but cannot get the submenu items "in" and "out" to appear. What am I missing?

Answer №1

It seems like there may be an issue with the loading of your scripts. After testing your code, I found that it was working perfectly fine. To ensure everything loads properly, I included the following lines to import the necessary files from external sources:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

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

The Bootstrap switch feature may encounter issues when trying to operate on dynamically generated checkbox inputs

My website is equipped with a mix of essential scripts: jQuery, Bootstrap, Modernizer, and JSON2HTML. I am trying to implement the following code snippet: <script> $('#my01Switch').bootstrapSwitch({ onText: 'ON', ...

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

summoning the iframe from a separate window

In my current setup, I have a link that passes a source to an iframe: <a href='new.mp4' target='showVideo'></a> <iframe src='sample.jpg' name='showVideo' ></iframe> However, what I would lik ...

Height and Width Dilemma in Visuals

Can you help with changing image resolution using jQuery? I have a background image applied to the body using CSS/PHP. My goal is to make the image fill the entire window by applying the screen height and width, without using repeat style. The code I am c ...

Tips for adjusting the height of an element to accommodate the height of another element

I am facing an issue with a dynamically added div using JS. The div includes an overlay and a contained element that should scroll along with the page if needed. I want to prevent any scrolling within the div itself, which resizes based on its content. The ...

Display text in front of a relatively positioned image

My image has the CSS property position: relative and it is covering some text content. Is there a way to bring the text in front of the image? I have already tried adjusting the z-index but it didn't work. Below is the code snippet: h2 { paddi ...

Removing a row from an HTML table using JavaScript

I have a piece of JavaScript code that is responsible for managing an HTML table. One of the functionalities it needs to support is deleting a row from the table. Currently, I am using the following snippet of code to achieve row deletion: var rowToDele ...

Obtain the text content of a div using JavaScript

Hello, I am new to Javascript! I have a table structure that looks like this: <table id='master_tbl'> <tbody> <tr id="master_hr'> <td class="myclass"> <table> <tbody ...

The background image is not displaying properly within a <span> tag

I am attempting to show a smiley icon within a span tag that is nested inside a list item. Below is the code snippet: <p> It contains various tabs:{" "} <li> Home - Showcase and brief informati ...

Generate visual at reduced quality (three.js)

Is there a way to reduce the resolution of my rendered canvas similar to how it can be done with the Blender camera resolution? I came across a suggestion to use renderer.setDevicePixelRatio(window.devicePixelRatio) However, when I tried this, the objec ...

"Use the <script src=...> tag to display content in the designated div

I have encountered a challenge with integrating an external script to pull an RSS feed from . The JavaScript code provided by this site is illustrated in the example below: <script src="//rss.bloople.net/?url=https%3A%2F%2Fwww.feedforall.com%2Fsample ...

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

Tips for customizing pagination in Core UI smart table styling

Is it possible to modify the color of pagination buttons in Core UI smart table for Angular? Below is a snapshot of my code: ...

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

Step-by-step guide on saving an array to localStorage using AngularJS

Currently working on constructing a shopping cart. My goal is to include the array invoice in localstorage for future reference. I suspect there may be some flaws with this particular approach. angular.module('myApp', ['ngCookies']); ...

Aligning the canvas resolution to match the video resolution for superimposition purposes

Within a div, I have both a canvas and a video element: <div id="videos"> <canvas id="my-canvas"></canvas> <video id="remote-video" autoplay></video> </div> Below is the css styling for both elements: #my-canv ...

What is the mechanism through which Material Icons determine the appropriate icon to display according to the element's content?

Can anyone explain how the icons in this specific structure function? <span class="material-icons"> accessibility_new </span> I've been exploring the Material Icons repository in an attempt to comprehend how the icon is displ ...

Using jQuery and cheerio to iterate through a collection of items

I am currently reviewing the elements within 2 HTML tables: <table class="content"> <tbody> <tr> <th>title1</th> <td>info1</td> </tr> <tr> ...

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this: <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ..."> <iframe style="height: 600px, ..."> </iframe> </d ...

Customize checkbox and label using jQuery

I have a scenario where I have multiple checkboxes and corresponding labels. When the answer is correct, I want to change the background color of the selected checkbox and label. <input type="checkbox" id="a" class="check-with-label" /> <label fo ...