What is the best way to incorporate a dropdown menu using CSS?

I need to enhance my existing website by adding a sub menu to the current menu code. This will make it easier for users to navigate to different pages on the site. Can someone please assist me with this task?

Here is the HTML code for the current menu:

<div id="menu">
            <ul>
                <li><a href="index.html" accesskey="1" title="">Home</a></li>

                <li><a href="services.html.html" accesskey="2" title="">Services</a></li>
                <li><a href="faq.html" accesskey="3" title="">FAQ</a></li>
                <li class="active"><a href="about.html" accesskey="4" title="">About</a></li>
                <li><a href="contact.html" accesskey="5" title="">Contact Us</a></li>   
            </ul>
</div>

And here is the CSS code for styling the menu:

/** HEADER */

#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}

#header {
overflow: none;
}

/** LOGO */

#logo {
float: left;
width: 10px;
height: 100px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
}

#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}

/** MENU */

#menu {
float: right;
height: 110px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-right: 1px;
}

#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}

#menu .active
{
background: rgba(0,0,0,0.70);
}
cssdrop-down-menu

Answer №1

Functional Menu:

Check out this quick fiddle

//HTML

<div id="menu">
<ul>
    <li><a href="index.html" accesskey="1" title="">Home</a>

    </li>
    <li><a href="services.html.html" accesskey="2" title="">Services</a>

        <ul>
            <li><a href="#">Something You Can Do</a>

            </li>
            <li><a href="#">Tasks to be Done</a>

            </li>
        </ul>
    </li>
    <li><a href="faq.html" accesskey="3" title="">FAQ</a>

    </li>
    <li class="active"><a href="about.html" accesskey="4" title="">About Us</a>

    </li>
    <li><a href="contact.html" accesskey="5" title="">Contact Information</a>

    </li>
</ul>
</div>

//CSS

/** MENU */
#menu {
    position:relative;
    height: 110px;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    float:left;
    line-height: 110px;
}
#menu li {
    list-style:none;
}
#menu>ul>li {
    float: left;
    margin-right: 1px;
    position:relative;
}
#menu>ul>li ul {
    height:100%;
    position:absolute;
    bottom:-100%
}
#menu>ul>li ul>li {
    bottom:0px;
    display:none;
    width:15em;
    float:left;
}
#menu>ul>li:hover ul>li {
    display:block
}
#menu a {
    display:block;
    padding: 0px 30px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFFFFF;
    background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
    text-decoration: none;
    cursor:pointer;
    background:rgba(200, 200, 200, 1);
}
#menu .active {
}

Answer №2

It is recommended to implement a jQuery plugin such as Superfish for improved functionality.

//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">

// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, make sure to utilize the updated r7 version (refer to FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

// initialize Superfish
<script>

  jQuery(document).ready(function(){
    jQuery('#menu ul').superfish();
  });

</script>

Answer №3

To begin, you can start by inserting your submenu into the HTML markup. Here is an example:

<li><a href="services.html.html" accesskey="2" title="">Services</a>
   <ul>
      <li> <a href="..."> sub menu item 1 </a> </li>
      <li> <a href="..."> sub menu item 2 </a> </li>
   </ul> 
</li>

....

Next, you will need to position your list items using CSS:

#menu li{
  position: relative;
}

After that, you can style your submenu with the following CSS rules:

#menu ul ul{
  position:absolute;
  left: 0;
  top: 100px;          /* height of the parent list item */
  display: none;       /* hide it */
}

#menu li:hover > ul{   /* display when mouse hovers over the parent list item */
  display:block;
}

You can test out this functionality on http://jsfiddle.net/9LcfX/

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

Fixing the Overflow Property in CSS

I just started learning about css, and I've encountered a problem with the code for the overflow property: div.hidden { background-color: #00FF00; width: 1000px; height: 1000px; overflow: hide; } ...

css

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...

csscss-selectors

Respond.js appears to be without functionality

Can anyone lend a hand? I'm feeling incredibly frustrated trying to get respond.js to cooperate. Typically, we have no issues with using it on our mobile sites. However, I am currently facing challenges trying to achieve mobile compatibility on one o ...

htmlcssresponsive-designrespond.js

Tips for automatically scrolling to the bottom of a div when the AntD drawer mounts

After reviewing the documentation, I discovered that I can customize the styling of the body using the bodyStyle={{}} property. Is there a way to ensure that when the drawer is opened, the scroller will always display the bottom view? The height of the bo ...

javascripthtmlcssreactjsantd

Reverse the orientation of the SVG image, for instance, the graph

I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http: ...

csshtmlsvg

Creating a multi-column layout in Bootstrap 4 without using the Masonry method

Currently, I am designing a column layout using Bootstrap 4. Here is the code snippet: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="r ...

htmlcssbootstrap-4

Looking for assistance with customizing a div using multiple classes and pseudo-classes from an external stylesheet

I am faced with a challenge - I have come across a website for which I do not possess the source code. Despite this, I am attempting to make external changes by inserting HTML snippets before certain div tags in order to modify the appearance of the site. ...

htmlcss

The alignment issue persists with the menu header, as the div is not functioning correctly

I've been struggling to properly align my menu on the website. As it stands, when a user arrives and is not logged in, they see the header below: https://i.stack.imgur.com/mTKse.png Once the user logs in, the login/register text is replaced by a dro ...

cssreactjsmaterial-ui

Top method for eliminating the default IOS date picker

My jQuery datepicker is functioning perfectly on all web browsers, however, I am encountering an issue when viewing it on mobile devices such as the iPad. The default IOS date picker also appears alongside mine. What would be the most effective way to elim ...

javascriptjqueryioscssdate

Could jQuery and CSS be utilized for image enlargement?

Is it possible for jQuery (or CSS!) to detect an area around the mouse when hovering over an image, capture the image underneath, and then zoom in on that area? This concept differs from typical jQuery zoom effects where there are two separate images - sm ...

jquerycss

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

There seems to be an issue with the display of my page in Chrome - it starts at the middle and ends on the right side. However, when I view it on my server or try it on Internet Explorer 11, it appears centered. Why is that? This problem only arose after ...

htmlcssgoogle-chromewebbootstrap-4

The sticky positioning in Css does not function properly on mobile devices

Encountering a challenge with sticky CSS on Chrome. While viewing on mobile browsers, one element of the page fails to assume a sticky position. The issue is evident on this specific page When viewed from a computer, the code below works perfectly; howeve ...

htmlcsswordpressmobilesticky

Prevent a child DIV from adopting the style of its parent page

Imagine a scenario where you have a webpage with its own unique stylesheet. You decide to include a popup or modal at the end of the page using Javascript, but you want this popup to have its own distinct style. Since the content within the modal is dynami ...

javascripthtmlcssmodal-dialogpopup

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it ...

css

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

htmlcss

How can I implement a while loop for this animation using Javascript?

I've been delving into the world of JavaScript for a few days now, but I've hit a roadblock when it comes to implementing a while loop/switch statement in this animation project. The idea behind the program is that the image will "level up" and ...

javascriptjquerycsswidgetjquery-animate

Show the exact file name for the CSS file being generated by grunt-contrib-compass

I need help specifying the output name of the CSS file in my grunt-contrib-compass task. Currently, it outputs as index.css. Current Output <%= yeoman.app %>/specialdir/themes/index.css Desired Output <%= yeoman.app %>/specialdir/themes/my-th ...

cssangularjssasscompassgrunt-contrib-compass

The td data is appearing fragmented and not continuous in one line

Why is the td element on my webpage not appearing on a single line? The weekly report for XYZ is displaying on two lines, but I want it to be on one line. Why is the label content showing up on the next line? Output: Weekly Report for Testing project ...

htmlcssasp.net

Building a unique style for ClassName using React

Embarking on my first React project as part of a school assignment has been quite an adventure. I kicked things off by running npm install -g create-react-app and then created my app with create-react-app my-app. After adding some HTML to the application ...

cssreactjs

Eliminating an undesired gap that exists between two ul li elements

Seeking assistance urgently. Any tips on eliminating the annoying small space that separates my 2 UL LI lists? I have a hunch it might be related to the <dd> tag, but pinpointing the exact issue is proving tricky. Check out this visual representati ...

jqueryhtmlcss