Switching to a dropdown navigation option

Sorry for the repetition, but I haven't been able to find a solution to my problem yet, so here I am asking again. I am still getting the hang of html5 and css3, and while I've managed so far, I'm stuck now.

I want to turn one of the options in my navigation menu into a drop-down menu. I've tried multiple times using tips from various sources, but I'm encountering issues.

Below is my CSS code for the Nav menu...

    /* Site Nav */

    #site-nav
{
    position: absolute;
    top: 0;
    right: 50px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: right;
}

    #site-nav ul
    {
        list-style: none;
        overflow: hidden;
    }

        #site-nav ul li
        {
            display: block;
            float: left;
            text-decoration: none;
            font-size: 1.2em;
            height: 90px;
            line-height: 110px;
            margin: 0 0 0 1.75em;
        }

            #site-nav ul li a
            {
                color: #000;
                text-decoration: none;
                outline: 0;
            }

            #site-nav ul li a:hover
            {
                color: #fff;
            }

        #site-nav ul li.current_page_item
        {
            background: url('images/nav-arrow.png') center 77px no-repeat;
        }

            #site-nav ul li.current_page_item a
            {
                color: #662d91;
            }

Here is the HTML for my menu...

    <ul>
                                <li><a href="index.html">Homepage</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="products.html">Products</a></li>
                                <li><a href="bullion.html">Bullion</a></li>
                                <li class="current_page_item"><a href="#.html">Contact Us</a></li>

                            </ul>

If it's possible to achieve this with just HTML5 and CSS3, that would be perfect. But I'm open to exploring the JavaScript option if necessary.

Thank you in advance for any guidance - your help means a lot to me.

EDIT 21/03/2013...

I attempted to use the code provided below, and you can see the progress I've made in this fiddle: http://jsfiddle.net/2rgSP/1/ I'm facing two issues: firstly, the links are being pushed off the edge of the website, and secondly, the drop-down menu falls behind the main wrapper. There seems to be some conflicting CSS causing these problems, but as a complete beginner, I'm clueless on how to resolve them. Hopefully someone can identify where I'm going wrong.

Thanks,

Lee

htmlcssdrop-down-menu

Answer №1

If you have the option of using JavaScript/jQuery, below is an example of how you can implement a CSS dropdown menu:

<ul id="cssdropdown">
    <li class="headLink">Home
        <ul>
            <li><a href="#">Home1</a></li>
            <li><a href="#">Home4</a></li>
            <li><a href="#">Home2</a></li>
            <li><a href="#">Home3</a></li>
            <li><a href="#">Home5</a></li>
        </ul>
    </li>
    <li class="headLink">About
        <ul>
            <li><a href="#">About1</a></li>
            <li><a href="#">About2</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">About3</a></li>
            <li><a href="#">About5</a></li>
        </ul>
    </li>

    <li class="headLink">Contact
        <ul>
            <li><a href="#">Contact1</a></li>
            <li><a href="#">Contact2</a></li>
            <li><a href="#">Contact3</a></li>
            <li><a href="#">Contact4</a></li>
            <li><a href="#">Contact5</a></li>
        </ul>
    </li>
    <li class="headLink">Links
        <ul>
            <li><a href="#">Links1</a></li>
            <li><a href="#">Links2</a></li>
            <li><a href="#">Links3</a></li>
            <li><a href="#">Links4</a></li>
            <li><a href="#">Links5</a></li>
        </ul>
    </li>
</ul>

CSS

body{
    padding:0px;
    margin:0px;
}
ul li{
    list-style-type:none;
}
#cssdropdown{
    padding:0px;
    margin:0px;
}
a{
    text-decoration:none;
    padding:0px;
    margin:0px;}
.headLink{ 
    display: inline-block; 
    padding:10px;
    margin:10px;
    text-align:right;
    background-color:#999999;
    cursor:pointer;
}
.headLink ul{
    display:none;
    position: absolute;
    margin:10px 0 0 -13px;
    padding:0 10px;
    text-align:left;
    background-color:#CCC;
    cursor:pointer;
}

JS:

$(function() {
    $(".headLink").hover(function() {
        $('ul',this).slideToggle();
    });

    });

DEMO

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 grid is intended to be positioned horizontally, but is currently being shown vertically

I need help fixing the layout of my items. They are currently displaying vertically instead of in a horizontal row. Any suggestions on how to correct this? https://i.stack.imgur.com/CQ4yG.jpg <div class="col-lg-12 col-sm-12 portfolio-item"> <d ...

htmlcssbootstrap-4

$PHP_SELF will be executed immediately upon the page loading

I recently designed an HTML page for inputting data into a MySQL database. In this setup, I've integrated PHP scripting directly within the HTML code. Take a look at the snippet below, <html> <head> </head> <body> <?php / ...

phpmysqlhtml

Express template failing to connect with scripts, css, and images

When using Express, I encounter difficulty in getting the css, js, and images to link up correctly when running the index.html file. The images are not showing up and the css and js files are not linking properly. <link rel="stylesheet" type="text/css" ...

javascripthtmlcssexpress

"Is there a virtual keyboard available that supports multiple inputs and automatically switches to the next input when the maximum length

Looking to build a virtual keyboard with multiple inputs that automatically switch to the next input field after reaching the maximum length. Currently having an issue where I can only fill the first input and not the second one. Any assistance in resolvin ...

javascripthtmljqueryajax

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...

csskendo-uitelerikstylesbubble-chart

Overlap one element entirely with another

Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...

javascripthtmlcss

Tips for creating a Bootstrap table with a "table-bordered" style, fixed header, and scrollable body

How can I keep the table header fixed while allowing the body to scroll without breaking the table layout? I've tried using the CSS below, but it results in the width of the header columns being different from the width of the body columns. Any sugges ...

htmlcsstwitter-bootstrap-3css-tables

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

Query Selector(jQuery selector) is a powerful tool for

Here is the HTML Table structure: <table class="display" style="width: 1000px;" id="failoverServers"> <thead> <tr> <th class="row_selector_head"> <input type='checkbox' class='select_all_ch ...

javascriptjqueryhtml

What is the best way to design a responsive menu that is perfectly centered?

I'm facing challenges with designing a menu that includes 4 items, needs to be centered next to each other with spacing in between, and should stack vertically on mobile devices. The desired look for the menu can be viewed in this image... Could some ...

css

Customize the <td> column based on values and rows. Modify the current jQuery code

This code snippet contains an HTML table that dynamically populates based on the dropdown selection. The script included in the code highlights the best and worst values in the table by changing their background color to green and red, respectively. & ...

javascriptjqueryhtmlbootstrap-4

Aligning two divs both horizontally and vertically within two adjacent columns each with a width of 50%

Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...

htmlcssresponsive-designvertical-alignment

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

Ways to incorporate external JavaScript files into a React component

I have been attempting to incorporate external javascript files into my react component. When I included them in a basic html file using script tags, everything worked smoothly. However, I am unsure of how to achieve this within a react component. < ...

javascripthtmlreactjsreact-hooksreact-helmet

What is causing the 'transitionend' event to trigger multiple times?

Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...

javascripthtml

The functionality of updating input values via jQuery AJAX in HTML response is currently not functioning as expected

Hello, I need some assistance. I'm encountering difficulty with jQuery in modifying HTML values that are dynamically inserted through an AJAX response. Here is the link to the JSFiddle. Below is the HTML on the page: <button id="test">test&l ...

javascriptjqueryhtmlajax

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

javascriptjqueryhtmlcss

Content move to the left with Material UI's shifting capabilities

Is anyone experiencing an issue with Material UI dropdown Select and Modals causing the content to shift to the left? I attempted using position: absolute on both the Select element and MenuItems, but unfortunately the content still shifted. Has anyone e ...

cssreactjsmaterial-ui

Incorporating a hamburger symbol into an established menu for easy navigation

I have come across a tutorial on creating a navigation menu with a logo positioned to the left. However, I now wish to incorporate a hamburger icon for mobile devices and I am unsure about the process. Despite my efforts to find a suitable tutorial onlin ...

htmlcss

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Is there a way to automatically apply styling to specific phrases on our website by searching for instances of those phrases? For example: <div> This is what you get from <span class="comp">Company Name</span>. We do all kin ...

javascriptjquerycss