Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below?

<html>
    <head>
        <title>Untitled Document</title>
        <style type="text/css">
            #navmenu ul ul li a {
                border:1px solid #888888; border-bottom: none; font-size:12pt; line-height: 1.6em; color:#303030; background-color:#a5a5a5; background-image:none;
            }
            #navmenu {
                width: 150px; /* set width of menu */
            }  
            #navmenu ul {
                list-style-type:none; margin:0px;   padding:0px;
            }
            #navmenu a {
                text-decoration:none; border: 1px solid #303030; width:170px;   display:block;   text-align:center;   font-size:14pt;   line-height:2em; background:url(Button_top.gif) repeat-x left;   font-family:Arial, Helvetica, sans-serif; color:white;
            }
            #navmenu a:hover {
                color: #a00;
                /* red text color on hover */
                background: #fff;
                /* white bgcolor on hover */
            }
            #navmenu li {
                /* make the list elements a containing block for the nested lists */
                position: relative;
            }
            #navmenu ul ul {
                position: absolute; top: 0; left: 100%;
                /* to position them to the right of their containing block */
                width: 100%;
                /* width is based on the containing block */
                }  
            #navmenu li {
                /* make the list elements a containing block for the nested lists */
                position: relative;
            }
            #navmenu ul ul {
                display: none;
            }
            #navmenu ul li:hover ul {
                display:block;
            }
        </style>
    </head>
    <body>
        <div id="navmenu">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
                <ul>
                    <li>
                        <a href="#">Blog 1</a>
                    </li>
                    <li>
                        <a href="#">Blog 2</a>
                    </li>
                </ul>
                <li>
                    <a href="#">Websites</a>
                </li>
                <ul>
                    <li>
                        <a href="#">Websites 1</a>
                    </li>
                    <li>
                        <a href="#">Websites 2</a>
                    </li>
                </ul>
                <li>
                    <a href="#">Photos</a>
                </li>
            </ul>
        </div>
    </body>
</html>

http://jsfiddle.net/9bHkj/1/

Answer №1

It may be necessary to reevaluate how the menu is being constructed. For example:

            <li>
                <a href="#">Blog</a>
            </li>
            <ul>
                <li>
                    <a href="#">Blog 1</a>
                </li>
                <li>
                    <a href="#">Blog 2</a>
                </li>
            </ul>

This is intended to be a Blog menu with two submenus, Blog 1 and Blog 2. However, the <ul> for the submenu should actually be inside the <li> of the main menu and not separate:

   <li>
      <a href="#">Blog</a>
      <!-- The <li> does not end here -->
      <ul>
         <li>
            <a href="#">Blog 1</a>
         </li>
         <li>
            <a href="#">Blog 2</a>
         </li>
      </ul>
   </li>  <!-- closing tag for the blog <li>, including submenu -->

By making this adjustment for all submenu items, you can ensure properly functioning submenus. From there, you can customize locations, colors, and more.

Answer №2

You've repeated yourself:

#navmenu li {
    /* define list elements as a container block for nested lists */
    position: relative;
}

Your nested ul lists are not enclosed within li elements. Therefore, the following code won't function either:

#navmenu ul li:hover ul {
    display:block;
}

Enclosing your ul inside li elements might help solve your issue.

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

Spacing Issue with Material UI Gap Placement

Currently, I am implementing Material UI 5 within a React project using the following code snippet: <Stack> <Stack flexDirection="row" justifyContent="center" padding={4} spacing={{ xs: 4 }} ...

Challenges in using HAML5 Canvas for mathematical applications

Hey there! I'm currently working on utilizing the canvas element to form various shapes, but I've encountered a few challenges when it comes to the mathematical aspect. Issue 1: I need to calculate an angle that is relative to the preceding line ...

jQuery Mobile for Enhanced Customer Relationship Management on the Web

I have recently been tasked with creating a Web Based CRM Software and I plan to use PHP and MYSQL as my backend. For the frontend, I am considering using a UI framework such as jQuery Mobile. I like that it is fully AJAX-driven, easy to code with, and has ...

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

instructions for executing this javascript within the <p> tag

This is the code I have written : <p onload=javascript:alert('sss')>www</p> Unfortunately, the code does not alert 'sss', Can someone please tell me what's wrong with my code? Thank you ...

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

Video showcasing issue with updating Ionic2 view

I am encountering an issue where my View is not updating as expected. When a player makes a move, the triggers work (I did a console log on every update of the current game [1]), but the View does not update regularly. To investigate this problem, I added ...

Can the placement and dimensions of the audio controls be customized?

I am working on an audio tag that initially hides the controls, and only shows them when a user clicks on a specific link. Here is the code snippet: var audio = document.getElementById(audioId); if (audio.paused) { audio.src = clip; audio.play(); ...

"The PHP script was executed despite having a MIME type of "text/html", which is not an appropriate JavaScript MIME type" error

I'm encountering an issue while trying to add data to an Oracle database using PHP from a Bootstrap form. When attempting to run the HTML file in Mozilla Firefox, the following error is displayed: The script from “http://localhost/CustomerPartInAs ...

Version 2 of the Microsoft Logo Animation

I made some changes to my Microsoft logo animation project. You can view the updated version on CodePen. Overall, I'm pretty happy with how it turned out except for one issue. I'm struggling to determine the right timing to end the animation so ...

Place an animated object in the center with the display style set to

I'm trying to vertically center the second span within my H1. After attempting to change from display: inline-block to display: flex, I found that this causes my animation to start at the beginning of the container rather than in the center. I suspe ...

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

Is it possible to create a multistep form on a single page without reloading the div with content from a PHP file, but instead appending it below? Here is my current progress: $(document).on('submit', '#reg-form', function(){ var ln = ...

Access the current slide number with the slideNumber feature in Reveal.js

Can someone assist me with Reveal.js? Could you explain how I can retrieve the current slide number and store it in a variable? I am looking to add an event on my fourth slide. Thank you for your help! ...

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

Display the PHP variable's contents as a text string within an HTML document

Looking at a WordPress PHP script, I came across the following snippet: echo '<div class="slide-media">' . $slide_media . '</div><!--/.slide-media-->' . "\n"; } I am interested in viewing the ...

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

Linking jQuery UI tabs to tabs on a different pageWould you like assistance

I am facing a challenge that I need help with. For a school project, I have to create 8 pages of HTML, each with a template and a menu. The menu consists of tabs that are supposed to link to separate pages when clicked. However, the issue is that when I cl ...

What steps are needed to enable the keyboard on a Otree application for mobile devices?

I previously utilized an Implicit Association Task (IAT) in an experiment conducted on computers. However, I now need to adapt this IAT for use on tablets or mobile devices. Here is how the IAT appears on a cellular device: https://i.stack.imgur.com/kNwo ...

What are some creative ways to customize the background of a MaterialUI modal design?

I am currently facing an issue with my MUI Modal setup. The backdrop is displaying as black even though I have proper styling in place. No matter what I do, the backdrop remains pitch black and does not update. Below is the code snippet along with a scree ...