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

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

phphtmlcssdatabaseecho

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

javascriptjqueryhtmlcss

Is there a way to troubleshoot the issue pertaining to using routerLink in Angular version 17.2?

Currently working on a small app, but encountering an error with routerLink in the console. I am new to angular and seeking help. ✘ [ERROR] NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'. Here is ...

htmlangularrouterlink

CSS Vertical Accordion Menu

I am struggling to modify the vertical accordion menu CSS. I am having difficulty adjusting the sub-menu list items. <div id="menuleft"> <div class="top">header</div> <ul> <li><a href="#">Main 1</a> ...

jquerycssmenusubmenu

Spacing in CSS between the menu and its submenu elements

My current challenge involves creating space between the menu and the submenu. However, I've noticed that when there is this space, the submenu doesn't function correctly. It only works when the design has no gap between the menu and the submenu. ...

htmlcss

How can I keep a button element in place when resizing the window using CSS?

I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...

css

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

I am currently populating a table using data from an XML file. One of the columns in the table contains links to more details. Due to the unique requirements of my web page setup (Chrome extension), I need to dynamically add an event handler when the table ...

javascripthtmldom-eventsaddeventlistenerevent-listener

Having difficulty adding spacing between the border and the content of a label

I've designed labels to function as buttons for radio buttons. I'm struggling to figure out why I can't add padding between the border and the background color content. Should I reconsider the structure of the radio/label elements, or is th ...

htmlcss

concealing directory titles within HTML and AJAX

What are the potential security risks associated with exposing PHP folder names? If there are risks, what methods can be used to conceal the folder names within html hyperlinks and ajax code? ...

phpajaxhtml

Cease the use of the jQuery.css() method

Does anyone know how to halt the jQuery css() function? I've successfully used the jQuery.stop() function to pause the animate() function, but I'm unsure about stopping css(). Any help is appreciated. Thanks! ...

jquerycssfunction

Retrieve the first menu item from a page menu based on the page ID through Wordpress

Is there a way to retrieve the label of the top menu item in a child menu using the page ID of the child menu? https://i.stack.imgur.com/7ji1x.png For example: I have the page ID of the test page. As a result, I aim to extract the text "L1," which repres ...

phpwordpressmenunavigation

Adjust the viewport to fit the width of the screen and display large images

Currently, I am experimenting with using a WebView to display a large image while incorporating multitouch functionality to prevent memory crashes. My webView is configured as follows: setInitialScale(20); WebSettings settings = getSettings(); ...

javaandroidhtmlwebview

Attaching a Stylesheet (CSS) without being inside the HEAD Tag

After seeing numerous inquiries about this topic, I have yet to find the answer I seek. My main question is whether it is feasible to connect an external stylesheet in a location other than the HEAD tag. I am facing this issue because I need to use Conflu ...

htmlcssstyleshead

Tips for selecting a secondary or even tertiary ancestor in a Sass project

Check out this piece of HTML code: <body> <div> <li class="more">hello <ul class="hello"> <li>hello</li> <li>hello</li> ...

csssass

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...

jqueryhtmlcss

Prevent unauthorized access to HTML pages with a secure login system

I created a basic login system using JavaScript that requires users to enter the correct username and password. Once verified, they are redirected to log1.html. From there, they can access various subpages such as log1-sub.html. However, I am struggling to ...

html

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

htmljquerycsstwitter-bootstrap

I'm perplexed as to why my webpage displays differently across various browsers

Currently, I am utilizing the Yahoo CSS reset and all my CSS is based on pixel values rather than relative units like ems. Interestingly, there seems to be a discrepancy in the position of the bottom right corner of the form-containing div between Chrome a ...

csscross-browser

Adding text to a Video Js fullscreen window on an iPad

Looking to enhance user experience on iPad while using a video js player, I want to make an image pop up upon completion of the video. Currently, I have it set up to work without full screen mode, but iPad users prefer watching videos in full screen. Is th ...

jquerycsshtmlhtml5-video

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

I am encountering an issue with my code. When I submit the value in getinv.php, it only returns a partial value. For example, when I click '2016-08-27', it only retrieves '2016'... My question is, how can I ensure that the exact value ...

javascriptphpjqueryhtmlajax