Steps to insert a Drop-Down Sub-Menu

I'm just about finished with my navigation panel.

Any tips on how to add a sub-menu? I currently have one in the Product page.

Below is the HTML code containing the sub-menus:

<nav>

<ul>

    <li><a href="">HOME</a></li>
    <li><a href="">PRODUCTS</a>
        <ul>
            <li><a href="">T-SHIRTS</a></li>
            <li><a href="">MUGS</a></li>
            <li><a href="">CUPS</a></li>
            <li><a href="">JEANS</a></li>            
        </ul>        
    </li>
    <li><a href="">SERVICES</a></li>
    <li><a href="">GALLERY</a></li>
    <li><a href="">ABOUT US</a></li>
    <li><a href="">CONTACT US</a></li>

 </ul>


 </nav>

This is the CSS Stylesheet used:

 nav{
   width:1000px;
   height:50px;
   background-color:#333;
   margin: 0 auto;
   padding: 20px 20px 20px 20px;
   font-family: NeoSans;
   text-align: center;
   overflow: hidden;
 }

 nav ul{
   list-style: none;
 }

 nav ul ul{
   display: none;
 }

 nav ul li{
   display: inline;
   float: left;
 }

 nav ul li a{
   color: #CCC;
   text-decoration: none;
   padding: 40px 41px 40px 41px;    
 }

 nav ul li a:hover{
   color: #F60;
   background-color: #000;
 }

Thanks to everyone for the help!

Let's keep going strong!

htmlcssnavigation

Answer №1

If you want to achieve the desired outcome, consider making some adjustments to the anchor elements by modifying properties such as padding and others:

header nav {
    list-style: none outside none;
    position: relative;
}
header nav ul {
    display: block;
    position: absolute;
    width: 140px;
}
nav li {
    width: 140px;
}
nav li:hover ul{
    display:block;
}

Answer №2

Example

<!doctype html>
<html>
<head>
  <style>
    .nav, .sub {
      font-family: Arial, Helvetica, sans-serif;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav li {
      background: #cb1212;
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 160px;
    }
    .nav li a {
      display: block;
      text-decoration: none;
      color: #fff;
    }
    .nav li a:hover {
      background: #f00;
    }
    .nav > li {
      border-right: 1px solid #f00;
      float: left;
    }
    .sub {
      display: none;
    }
    .nav > li:hover .sub {
      display: block;
    }
    .sub li {
      border-top: 1px solid #f00;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li>
      <a href="#">Services &raquo;</a>
      <ul class="sub">
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a></li>
  </ul>
</body>
</html>

Answer №3

I have made some adjustments to your CSS and you can view the changes here

HTML

<nav>

<ul>

    <li><a href="">HOME</a></li>
    <li><a href="">PRODUCTS</a>
        <ul>
            <li><a href="">T-SHIRTS</a></li>
            <li><a href="">MUGS</a></li>
            <li><a href="">CUPS</a></li>
            <li><a href="">JEANS</a></li>            
        </ul>        
    </li>
    <li><a href="">SERVICES</a></li>
    <li><a href="">GALLERY</a></li>
    <li><a href="">ABOUT US</a></li>
    <li><a href="">CONTACT US</a></li>

 </ul>


 </nav>

CSS

nav{
   width:1000px;
   height:50px;
   background-color:#333;
   font-family: NeoSans;
   line-height:50px;
 }

 nav ul,  nav ul li{
   list-style: none;
    padding:0;
    margin:0;
 }

 nav ul li ul{
   display: none;
 }

 nav ul li{
   display: inline;
   float: left;
   position:relative;
 }

 nav ul li a{
   color: #CCC;
   text-decoration: none;   
   padding:0 10px;
    display:block;
 }

 nav ul li a:hover{
   color: #F60;
   background-color: #000;
 }
 nav ul li:hover ul{
    display:block;
    position:absolute;
    left:0;
    width:200px;
    top:51px;
    background:#333;
    text-align:left;
 }
 nav ul ul li{
     float:none;
    display:block;
 }
 nav ul ul li a{
     padding:0;
    disbplay:block;
    padding:0 10px;
 }

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 integrate a GWT library into Dart programming?

Considering migrating to Dart, but unsure of its maturity. Can a library originally written in GWT be used in Dart? ...

javajavascripthtmlgwtdart

The background image fails to display on the button

Why isn't the background image for my button appearing when set using a CSS rule? I have a button with the class "todo" and although other parts of the rule work, the image itself does not show up even after trying "background: url" and "background-im ...

htmlcss

Combining cells through the utilization of JavaScript

I've searched for ways to merge cells in a table using JavaScript but haven't been able to find any code that works. Is there a specific approach I can follow to implement cell merging like in MS-WORD tables? Your advice would be greatly apprec ...

javascripthtmlmerge

Contact Company by Sending Email According to Selected Product Dropdown Choice

If a customer selects a specific business option from the dropdown menu on the product page, I want to send the standard WooCommerce Order Confirmation Email to both the site admin and that selected business. Backpack $50 Choose an Option Business First ...

phphtmlwordpresswoocommerce

Update array when checkbox is selected/deselected

Using angular-google-maps, I am creating a map with various types of markers. Below the map, there are checkboxes in a simple form: <div class="mapOptions"> <form action="" class="form-inline" style="text-align:center"> <label for=""& ...

javascripthtmlangularjs

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Having trouble with a basic PHP/SQL search bar for my database. The search results are not showing up even though the search bar appears on the page. When I type something, it doesn't reflect in the URL. Below is the code snippet. I am connecting to t ...

phphtmlmysqlmysqli

Is there a way to use regular expressions to search for class names within nested div elements?

I'm struggling to find nested divs like these in my document object model (DOM) <div class="two-columns some-other-class"> <div class="two-columns some-other-class"> </div> </div> I attempted to search for neste ...

javascriptjqueryhtmlregex

What is the best way to add rounded corners to tables in Bootstrap 3?

Is there a way to give the top and bottom corners of a table rounded edges? I am currently using Bootstrap 3 tables, but they have no corner radius by default. How can I achieve this effect? ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

javascriptcssbootstrap-4

Is there a method to instruct crawlers to overlook specific sections of a document?

I understand that there are various methods to control the access of crawlers/spiders to documents such as robots.txt, meta tags, link attributes, etc. However, in my particular case, I am looking to exclude only a specific portion of a document. This por ...

javascripthtmlseoweb-crawler

Navigate the Xpath to target the text enclosed by tags, pausing the extraction process upon encountering an internal tag within the

I am seeking to extract specific text from various forms of HTML code. Only the text within certain tags should be considered, and everything after those tags should be ignored. The structure of the HTML varies. <span class="classA">Text 1 ...

htmlxpathxpath-1.0

Accessing the phone number input from a form in Rails and verifying its presence in the database. Implementing distinct ajax responses based on the existence of the value

Looking for a way to verify phone numbers? The process involves users entering a phone number, submitting the form, and cross-referencing it with a database of phone number records to determine if it's valid. My goal is to provide different AJAX respo ...

jqueryhtmlruby-on-railsajaxerb

Is it necessary to use a specific button to submit on Return (Enter)?

In a wizard-type form, there are two buttons present. The Back button is positioned on the left side, while the Next button is located on the right side. For an example of this setup, visit http://jsfiddle.net/WSwb7/1/. Please note that submitting the form ...

htmlcssformstwitter-bootstrapsubmit

Align the inline text at the center as if it were an inline-block element

Currently working on a design that appears deceptively simple, yet I'm encountering challenges in centering it while keeping the text aligned to the left. https://i.sstatic.net/qhf6p.png In an attempt to have the background span only the actual text ...

javascripthtmlcss

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

Organize and conceal identical columns in an Angular 4+ table

My goal is to organize the table by both name and first name. If there are any duplicate entries, I plan to keep just one line visible while adding an accordion feature to display the duplicates in a collapsed manner. Included below is the TS and HTML ...

html

Outlook not adding padding to button in HTML email

https://i.stack.imgur.com/vMgGS.png Is there a way to apply the same padding to the border as seen on the button above? Adding the border directly to the td element seems like a solution, but it is not feasible due to the presence of border-radius in anot ...

htmlemailbuttonhtml-email

Switching between fixed and unfixed divs causes two absolute divs to alternate

I am currently working on a code to keep a fixed div ("two") in place between two absolute positioned divs ("one" and "footer") while scrolling. However, there is an issue that arises when the browser window is resized. The distance between the footer and ...

javascriptjquerycss

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

htmlcssflexbox