The HTML dropdown menu is malfunctioning

I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary.

The submenu is appearing next to the main menu rather than underneath it.

Is there anyone who can assist me with this issue? Thanks in advance!

HTML:

<div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
            <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
            <ul>
            <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
            <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
            </ul></li>

            <li><a href="#" accesskey="3" title="">About Us</a></li>
            <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a></li>
            <li><a href="#" accesskey="5" title="">Contact Us</a>

            </li>
        </ul>
    </div> <!-- menu -->

CSS:

#menu
{
    position: absolute;
    right: 0;
}

#menu ul
{
    display: inline-block;
    line-height: 1em;
    position: relative; /* side by side*/
    right: 0;
    top: 2em;
    list-style: none;
    /*display: inline-table;*/
}
/*
#menu ul: after
{
        content: ""; 
        clear: both; 
        display: inline-block;
}*/

#Menu ul ul {
display: none;
}
/*
#Menu ul li:hover > ul 
{
    display: inline-block;
    }

*/
#menu ul li
{
    float: left; /* on same line */
    margin-left: 0.50em;
    padding: 1em 1.5em;
    letter-spacing: 0.20em;
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    color: #OOC;
    outline: 0;
}
#menu ul li:hover {
        background: #00F;
}
#menu ul li:hover a {
            color: #FFF;
}


#menu ul li a /*#menu ul li span*/
{
    display: inline-block
    margin-left: 0.50em;
    letter-spacing: 0.20em;
    text-decoration: none; /* no underline*/ 
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    color: #OOC;
}


#menu ul ul /* submenu*/
{
    background: #00F;
    top: 100%;
    padding: 0;
    position: absolute; 
    visibility: hidden;
}

#menu ul:hover ul
{
    visibility:visible;
}
#menu ul ul li
{
    float: none; /*one below the other */
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    position: relative;
    color: #FFF;
}
htmlcss

Answer №1

Take a look at this:

HTML

<div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="#" accesskey="3" title="">About Us</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="#" accesskey="5" title="">Contact Us</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
        </ul>
    </div>

StyleSheet

#menu {
  position: absolute;
  right: 0;
}
#menu ul {
  display: inline-block;
  line-height: 1em;
  position: relative;
  /*right: 0;*/
  
  top: 2em;
  list-style: none;
}
#menu ul li {
  float: left;
  padding: 1em 1.5em;
  letter-spacing: 0.20em;
  font-size: 0.90em;
  font-weight: 600;
  text-transform: uppercase;
  color: #00C;
  outline: 0;
}
#menu ul li a {
  display: inline-block;
  margin-left: 0.50em;
  letter-spacing: 0.20em;
  text-decoration: none;
  font-size: 0.90em;
  font-weight: 600;
  text-transform: uppercase;
  outline: 0;
  color: #00c;
}
#menu ul li:hover {
  background: #00F;
}
#menu ul li:hover a {
  color: #FFF;
}
#menu ul:hover ul {
  visibility: visible;
}
#menu ul ul {
  /*display: none;*/
  
  background: #00F;
  top: 100%;
  padding: 0;
  position: absolute;
  visibility: hidden;
}
#menu ul ul li {
  float: none;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  position: relative;
  color: #FFF;
}

Check out the Demo

Answer №2

This may not be a complete solution, but it can definitely help you get started on the right track. One key recommendation would be to pay close attention to your ul li groupings: JS Fiddle

HTML

<div id="menu">
    <ul>
        <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="#" accesskey="3" title="">About Us</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="#" accesskey="5" title="">Contact Us</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#menu {
    position: absolute;
    right: 0;
}
#menu ul {
    display: inline-block;
    line-height: 1em;
    position: relative;
    /* side by side */
    right: 0;
    list-style: none;
    /*display: inline-table;*/
}
/*
#menu ul: after
{
        content: ""; 
        clear: both; 
        display: inline-block;
}*/
 #Menu ul li ul {
    height: 0;
}
#Menu ul li:hover > ul {
    height: 10px;
}
#menu ul li {
    /* aligned horizontally */
    padding: 1em;
    letter-spacing: 0.20em;
    font-size: 0.90em;

    text-transform: uppercase;
    color: #OOC;
    outline: 0;
}
#menu ul li:hover {
    background: #00F;
}
#menu ul li:hover a {
    color: #FFF;
}
#menu ul li a
/*#menu ul li span*/
 {
    letter-spacing: 0.20em;
    text-decoration: none;
    /* no underline*/
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    color: #OOC;

}
#menu ul li ul 
/* submenu*/
 {
    width: 86px;
    background: #00F;
    height: 0;
    overflow: hidden;
    text-align: center;
    display: block;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
        position: absolute;
}
#menu ul:hover > li ul {
    height: 90px;
        width: 86px;
        padding: 20px;
}
#menu ul li ul li {
    /* stacked vertically */
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    color: #FFF;

}

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

Leverage CSS styling for database values within a PHP framework

How can I style MYSQL database values in HTML using CSS? My vegetarian database row has 'Y' for yes and 'N' for no. I want to apply different styles to these values using CSS as I display them on my PHP-based page. if ($result1->num_ ...

phphtmlcssmysqldatabase

Struggling with implementing the use of XMLHttpRequest to transfer a blob data from MySQL to JavaScript

I have a blob stored in my local WAMP64/MySQL server that I need to retrieve and pass to an HTML file using XMLHttpRequest. I know I should set responseType="blob", but I'm not sure how to transfer the blob from PHP to JavaScript in my HTML file. Any ...

javascriptphphtmlmysqlajax

Text field auto-saving within an iFrame using localStorage is not functioning as expected

My goal is to create a rich text editor with an autosave feature using an iframe. Although each code part works individually, I am struggling to combine them effectively. View LIVEDEMO This graphic illustrates what I aim to accomplish: The editable iFram ...

javascripthtmliframelocal-storageautosave

Create a rectangular container with text using CSS

Looking to achieve a square box design using CSS with specific dimensions? Want to insert text inside the square and ensure it is horizontally centered within the square? Check out this code snippet: #myid { width: 100px; height: 100px; ...

htmlcss

Strong tags are not functioning properly within paragraph tags in Firefox

It has come to my attention that when I insert <strong> into a <p>, the text does not appear bold. This issue seems to only occur in Firefox, as Chrome and Safari display it correctly. However, when I place <strong> inside a <li>, e ...

htmlcss

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

htmlcsstwitter-bootstrap

Using HTML, CSS, and jQuery to create a master-detail feature

I'm looking to implement a master-detail layout, so I decided to follow this tutorial for guidance: While trying to replicate the tutorial, I encountered an issue with my code. Here's the code snippet that I am working on: HTML/jQuery <!DO ...

javascriptjqueryhtmlcss

Issue regarding custom CSS implementation in Angular project

Being a French speaker, I apologize in advance for any mistakes I might make. I am also fairly new to Angular, so if you could provide detailed explanations in your responses, it would be greatly appreciated. Thank you. I am trying to import a custom CSS ...

htmlcssangulartypescript

Extract hidden form variables using a function in PHP

Here is the JavaScript function that I have written: function GetCellValues() { var rows = document.getElementsByTagName('tr'); var str = ''; for (var c = 1 ; c < rows.length ; c++) { str += '\n&apo ...

javascriptphphtmlhidden

Modify content or display picture within accordion panel based on its identifier

In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...

javascriptjqueryhtmlcssjquery-ui

Issue observed with the functionality of checkAll and uncheckAll after a user interacts with a single checkbox

After completing an Angular course on Udemy, I decided to implement a custom checkbox in my Angular app. However, I encountered an issue where the UI was not updating properly when using checkAll and uncheckAll functions after the user interacted with an i ...

cssangular

What is the best way to connect internal files within Angular?

I am encountering an issue when trying to connect my login page from the navbar. Here is the code snippet for the navbar that I have: <div class="navbar-container"> <ul id="slide-out" class="side-nav center-align"> <li> <d ...

htmlangularangular2-routingfilepathrouterlink

Align both the image and text in the center with no space between

How can I center two blocks containing both images and text vertically and horizontally while using flexbox? I notice that when the text is longer, padding appears between the image and the text. How can I remove this padding?1 .product-teaser { width ...

htmlcss

Persisting Big IndexedDB in the Browser

As we embark on the development of a Line of Business (LOB) HTML5 web application, our key objective is to ensure that the application has offline capabilities. Our plan involves retrieving a substantial amount of SQL data from the server and storing it in ...

sql-serverhtmlbrowserlocal-storageindexeddb

Sending data from an element within an ngFor loop to a service module

In my component, I have a loop that goes through an array of different areas with unique IDs. When you click the button, it triggers a dialog containing an iframe. This iframe listens for an event and retrieves data as JSON, then sends it via POST to an IN ...

htmlangulartypescript

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

After thoroughly checking the js tags and ensuring everything is properly closed, it's frustrating when the JavaScript suddenly stops working. The code functions perfectly in JSFiddle, leading me to believe that the issue may lie with something I&apos ...

javascriptjqueryhtmlcss

Is there a way to determine the location where my website is fetching CSS and media files from?

After implementing Wagtail on my website, I encountered an issue with the CSS and images not being found when the site was put into production. I have already tried running python manage.py collectstatic and ensured that all of my CSS files are located in ...

csspython-3.xwagtail

Create code with a form button and showcase the produced code on the webpage

I have created two files: code_generator.html, which takes input in the form of an image URL and landing URL. When I click on the submit button, it calls code_created.php. <html> <head> </head> <body> <form a ...

phphtml

Tips for styling buttons in react-admin with custom CSS

I need some help with customizing buttons in react-admin. I am new to the platform and unsure about how to go about changing the button CSS for various actions such as create, edit, and export. Can anyone provide guidance on the best way to customize these ...

javascriptcssreactjs

Utilizing negative values in lineTo, strokeRect, and fillRect functions

Is it possible to input negative numbers into the drawing primitives of HTML5 canvas? For instance, if I apply a translation of (100,100), would I be able to draw a rectangle or line with coordinates (-25,-25)? Initial testing using lineTo seems inconclus ...

javascripthtmlcanvas