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

What are the steps to creating a dynamic, layered column design using HTML?

I'm looking to create a layout that resembles the one on www.PInterest.com, featuring varying numbers of columns depending on the browser width (responsive design). My challenge lies in stacking the boxes vertically with different heights, without let ...

htmlcss

Expanding a grid cell beyond 100% can be achieved using a 1

I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two). .grid-container { display: grid; grid-template-a ...

htmlcsscss-grid

problems with basic text styling in containers

I've been experimenting with text in boxes and I've noticed that when the screen size changes, extra padding is added to the top of the box even though it's not in the code. Is there a way to prevent this from happening when the screen resiz ...

css

Is it possible to scroll a div on mobile without the need for jQuery plugins?

Upon investigating the initial query, we managed to implement D3js for identifying a scroll event. This allowed us to scroll the div #scroll-content from any location on desktop devices. However, we encountered an issue where this method does not function ...

javascripthtmld3.jsmobilescroll

Having trouble eliminating the underline on Vue router-link?

I've experimented with various approaches in an attempt to remove the underline from router-link. This is the code I have: <router-link :to="{name: 'Plan'}"> <div>Plan Your Trip</div> <div class=&apos ...

cssvue.jsvuejs2vue-routerrouterlink

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...

javascripthtmlcssmailto

Switching between two states of a single 'td' element within a column

I am trying to implement a feature where only specific elements in the fourth column of a four-column table toggle when clicked. For example, clicking on an element in the fifth row third column should toggle the corresponding element in the fifth row four ...

javascriptjqueryhtmlhtml-table

Comparison between the sluggishness of radio buttons in Internet Explorer 10 versus Chrome when using jQuery

When using IE 10, Chrome, and jquery 1.10.2 with the standard template from Visual Studio 2013 (.Net 4.5), I encounter an issue with radio buttons. Upon clicking a radio button, two actions are supposed to occur: 1. Recreation of all the radio buttons. 2 ...

javascriptjqueryhtmlcross-browser

Update the picture displayed in the parent div when it is in an

My code currently changes the image when a parent div is in an active state, but I'm struggling to figure out how to revert it back to the original image when clicked again. I attempted to use 'return false' at the end of the script, but it ...

javascripthtmljquerycss

Using jQuery, how can I add value to every input when the option is changed?

I need help changing the values of all input:text elements based on selections from a select menu. Specifically, I want to change only the matched td.class values from the data-pset attribute inside the <select>. As a beginner in jQuery, I can only ...

javascripthtmljquery

Determine whether an element has the capability to hold text content

Is there a surefire and reliable method to determine if an HTML element is capable of holding text, using only pure JavaScript or jQuery? For example, <br>, <hr>, or <tr> cannot contain text nodes, whereas <div>, <td>, or < ...

javascriptjqueryhtmldom

Determine if the webpage is the sole tab open in the current window

How can I determine if the current web page tab is the only one open in the window? Despite searching on Google for about 20 minutes, I couldn't find any relevant information. I would like to achieve this without relying on add-ons or plugins, but if ...

javascripthtmlbrowser

Radio button - arranging the background image and text in alignment

I'm struggling to align my custom radio buttons alongside text. Here is an example image: https://i.sstatic.net/2g5w8.jpg Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { ...

htmlcsstwitter-bootstrapradio-button

Adjust the dimensions and position of the notification box using Twitter Bootstrap

I am struggling to center and adjust the size to 80% of an alert box, but the text-center class is not achieving this for me. <div class="text-center"> <div class="alert alert-info" style="width: 80%;" role="alert"> <i class="fa fa- ...

htmlcsstwitter-bootstrap

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this: <div style="float:left; width:100%;"> <?php foreach ($datas as $rec) { ?> <div ...

csshtml

Bootstrap - Input fields not following grid constraints

I have scoured the internet for answers to my question and haven't found anything useful, not even in previous posts on this forum. Currently, I am working on a website for internal company use and tinkering with it at home. However, I seem to be fac ...

javascripthtmltwitter-bootstrapbootstrap-4

Embed JavaScript within the Material-UI style components

I was hoping to incorporate some conditional logic within my MUI styles Currently, I am using inline styles which are functional <div className={classes.form} style={{alignItems: ((Code.length>10 || Description.length>100) ? 'start' : & ...

cssreactjsmaterial-ui

The dropdown menu fails to function when placed within a div or generated dynamically

When I try to utilize the "dropdown-menu" outside of a div, it works correctly. However, when it is placed inside a div or added dynamically, it does not work as intended. Here is an example on jsfiddle The code snippet is as follows: <link rel="s ...

javascripthtmljquerydrop-down-menubootstrap-5

Use CSS to make the margin of one div the same width as another div

There are two classes that control the sidebar layout: .w-sidebar { width: 250px; min-width: 250px; max-width: 250px; } .row.collapse { margin-left: -250px; left: 0; } In order for the second class to function properly, the margin-le ...

htmlcssbootstrap-4

The children elements inside a parent div with Flexbox are now taking on the height of their container

I am facing an issue with my flexbox grid layout where one column contains a tall image while another column has two shorter images stacked on top of each other. The problem arises when viewing the layout in Internet Explorer, as the height of the smaller ...

htmlcssinternet-explorerflexbox