Creating a second level drop down menu with HTML and CSS

After exploring a few questions and attempting to use similar ideas, I'm still struggling to get this to work. Could someone lend a hand?

My goal is to create a second level drop-down menu using a provided template that does not have it built-in. However, when I tried the code below, the menu displayed with bullet-pointed links underneath, which looked quite funny. I'm trying to style it correctly with the template but unsure how to achieve this. Here are the codes I've already tried.

Original HTML Code

<body class="homepage">
<header id="header">
  <nav class="navbar navbar-inverse" role="banner">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" href="index.html"><i class="fa fa-bolt"></i> SnappySites</a></a> </div>
      <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about-us.html">About</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="pricing.html">Pricing</a></li>
          <li><a href="contact-us.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <!--/.container--> 
  </nav>
  <!--/nav--> 

</header>
<!--/header-->

Desired HTML Code

<body class="homepage">
<header id="header">
  <nav class="navbar navbar-inverse" role="banner">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" href="index.html"><i class="fa fa-bolt"></i> SnappySites</a></a> </div>
      <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about-us.html">About</a></li>
          <li><a href="services.html">Services</a>
          <ul>
              <li><a>Second level link 1</a></li>
              <li><a>Second level link 2</a></li>
          </ul>
          </li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="pricing.html">Pricing</a></li>
          <li><a href="contact-us.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <!--/.container--> 
  </nav>
  <!--/nav--> 

</header>
<!--/header-->

CSS Code

/*************************
*******Header******
**************************/

.navbar>.container .navbar-brand {
    margin-left: 0;
}
.navbar-brand {
    padding: 0;
    margin: 0;
}
.navbar {
    border-radius: 0;
    margin-bottom: 0;
    background: #151515;
    padding: 15px 0;
    padding-bottom: 0;
}
.navbar-nav {
    margin-top: 12px;
}
.navbar-nav>li {
    margin-left: 35px;
    padding-bottom: 28px;
}
.navbar-inverse .navbar-nav > li > a {
    padding: 5px 12px;
    margin: 0;
    border-radius: 3px;
    color: #fff;
    line-height: 24px;
    display: inline-block;
}
.navbar-inverse .navbar-nav > li > a:hover {
    background-color: #3498db;
    color: #fff;
}
.navbar-inverse {
    border: none;
}
.navbar-inverse .navbar-brand {
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
    color: #fff;
}
.navbar-inverse .navbar-brand .fa {
    color: #3498db;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #333;
    color: #fff;
}

I believe some additional CSS code would be needed such as...

.navbar-nav>ul {
        margin-left: 35px;
        padding-bottom: 28px;
    }

If anyone has any suggestions or tips on achieving this, I would greatly appreciate it! Thank you!

htmlcssmenu

Answer №1

To solve the issue, consider changing the parent <li> CSS position property to ‘relative’.

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

li ul { display: none; }

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #2c3e50; }

Ready to take it from here? Utilize this sample code as a starting point and more details can be found here. Best of luck with integrating it into your project!

Answer №2

When defining a fixed width for your navigation, you can utilize the following code snippet and/or refer to the attached fiddle that I have prepared based on the code provided by you. I trust this will be beneficial!

Here is the section of HTML:

<header id="header">
  <nav class="navbar navbar-inverse" role="banner">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" href="index.html"><i class="fa fa-bolt"></i> SnappySites</a></a> </div>
      <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about-us.html">About</a></li>
          <li><a href="services.html">Services</a>
          <ul>
              <li><a>Second level link 1</a></li>
              <li><a>Second level link 2</a></li>
          </ul>
          </li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="pricing.html">Pricing</a></li>
          <li><a href="contact-us.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <!--/.container--> 
  </nav>
  <!--/nav--> 
</header>

And here are the corresponding CSS styles:

.navbar>.container .navbar-brand {
    margin-left: 0;
}
.navbar-brand {
    padding: 0;
    margin: 0;
}
.navbar {
    border-radius: 0;
    margin-bottom: 0;
    padding: 15px 0;
    padding-bottom: 0;
}
.navbar-nav {
    margin-top: 12px;
}
<!-- Remaining CSS styles omitted for brevity -->

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 it possible to keep text truncated with an ellipsis and still have vertical text perfectly centered?

I need to achieve a design where the book-spine text is both visually centered and truncated inside the shelf. It should resemble the spine of a book. However, when the text in book-spine is too long, it should be cut off with an ellipsis. In the ca ...

htmlcsscenteringtruncate

Enhancing interactivity by incorporating GIFs upon clicking a JavaScript button

A JavaScript button has been created to generate Facts (gifs), with a desire to include a social media share option for platforms like Facebook below the GIF. The code snippet provided includes an array of GIF images and the functionality to display them u ...

javascripthtmlfacebook

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

javascriptjqueryhtmlarraysfor-loop

Vue.js component unable to validate HTML input patterns

Attempting to create HTML forms with the 'pattern' input attribute has been an interesting challenge for me. When implementing this through Vue.js components, I encountered some strange behavior. Check out this fiddle to see it in action. Vue.co ...

javascripthtmlvue.jsvuejs2vue-component

What causes external CSS to take precedence over embedded CSS in my webpage?

As per a certain source, conflicting CSS styles on the same element should be overridden by embedded styles over external styles, but my observation proves otherwise. My HTML code (simplified version) is as follows: <html> <head> <link r ...

css

When an element possesses a particular class, modify the css styling of a different

My menu is an unordered list, with each menu item gaining the "active" class when clicked. This works perfectly fine. However, I have an arrow positioned absolutely and its "top" style needs to change based on which list item has the "active" class. Curr ...

jqueryhtmlcssconditional-statements

Prevent all elements sharing the same class from expanding upon clicking if their parent element

Currently, I have implemented a function as a click event callback on a button. The purpose of this function is to toggle the class and provide a dropdown effect when the button is clicked. While this functionality works perfectly when the dropdown element ...

javascriptjqueryhtmlcss

Creating a unique custom theme for Twitter Bootstrap at 1200px and 980px screen sizes

Using the Twitter Bootstrap CSS framework, I have successfully created a custom navigation bar for desktop devices with a width of 1200 pixels and above. Now, I want to create similar navigation bars for other screen widths such as 980px, tablets, and phon ...

htmlcsstwitter-bootstrapresponsive-design

Solutions for missing background in Bootstrap hamburger menu upon clicking

Is there a way to change the background color to white when the hamburger menu is activated in Tablet or Mobile view? I want to customize the appearance by switching the Logo, Title, Nav-links, and Menu button colors to black with a white background inste ...

htmlcssbootstrap-4

Developing visually appealing HTML tables with CSS styles

I'm currently working on a website project and I'm looking to incorporate a table similar to the one shown in the image. While I am familiar with HTML tables, I'm struggling to recreate this specific layout. Despite my best efforts, I haven& ...

htmlcsshtml-table

Dimensions of Titles (H1, H2 etc)

I am looking to have a unique background color for my headers from h1 through h6. The width of this background should match the width of the text in the header, along with padding. Currently, the background width is matching the container instead of the te ...

cssheaderwidth

Item within text box remains untouched

I am working with a 1) Text field 2) Drop down list 3) List box I have written code to add the selected value from the drop down list to the list box and text field, but I'm having trouble removing the value from the text field. Can someone please he ...

htmlasp.net

Animating the entry and exit of tables in AngularJS

Looking for a way to animate rows entering and leaving a table in my AngularJS app. Check out my progress on CodePen: here Here's the HTML I'm working with: <tbody> <tr class="md-table-row" ng-repeat="row in tableRow"> <td ...

cssangularjsanimationcss-animationsng-animate

Editable span Option

One of my skills includes creating a dynamic contenteditable span within text that can expand and contract, as well as wrap around multiple lines without taking up the entire width: div { width: 100px; background: #f00; padding: 5px; } span { bo ...

javascripthtmlcsscontenteditable

Tips for applying CSS to background images

Just working with one div here <div id="particles-js" > and in my CSS, I've got this: #particles-js{ width: 100%; height: 100%; background-color: #b61924; background-image: url("../js/image.jpg"); background-size: cover; backg ...

htmlcss

Receiving Incorrect Input Value for Input Type 'Month'

Currently, I am attempting to retrieve the value of a two-digit month and a two-digit year from an input type called "month." ISSUE The format seems correct, but the incorrect date is being returned. SOURCE CODE: $("#cardExpireDate").change(function ...

jquerycssformsinput

Toggle the visibility of a hidden div by clicking a button

After spending several days working on this project, just when I thought it was perfect, I had to completely restructure the entire page. Now I'm feeling stuck and in need of some help. The issue is that I have three images with buttons underneath eac ...

javascriptcssbuttonanchorhidden-field

Clicking anywhere outside a popup menu in JavaScript will deactivate a toggle and hide it

I have three different menu options: home,Clinic, and About. When I click on the Clinic option, a Megamenu appears, and if I click on it again, the Megamenu is hidden. I want the Megamenu to hide when clicking anywhere on the webpage. The issue is that cu ...

javascripthtmljquery

Issue with Angular Bootstrap: Navbar collapsing instead of expanding

I am currently working on an Angular project that utilizes Bootstrap for styling. My goal is to create a menu bar with a dropdown icon that appears when the screen size is too small to display all the menu items. However, I have encountered an issue where ...

htmlangularangular-ui-bootstrapbootstrap-5

Obtaining the value of an HTML span tag during execution on a PHP Webdriver client and Selenium can be achieved

Currently working with the php webdriver client along with selnium Struggling to retrieve the value from the span tag showing Rs 350 <div class="fareBlock busDataBlock"> <div> <span class="fareStart">< ...

javascriptphpjqueryhtmlselenium