Design a menu featuring two additional submenus

I'm having trouble with the second sub-menu in this menu. It doesn't open the second sub-menu item. What can I do?

<div id='cssmenu'>
                    <ul>
                        <li class='active'><a href='index.html'><span>normal menu</span></a></li>

                        <li class='has-sub'><a href='#'><span>menu with sub menu</span></a>
                            <ul>
                                <li><a href='#'><span>first sub menu</span></a></li>
                                <ul>
                                    <li><a href='#'><span>second sub menu</span></a></li>
                                </ul>
                                <li><a href='#'><span>normal menu</span></a></li>
                                <li class='last'><a href='#'><span>normal menu</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

I am using jquery-1.7.2.min.js and this is my jQuery code:

$(document).ready(function () {
    $('#cssmenu > ul > li > a').click(function () {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
});
jqueryhtmlcss

Answer №1

http://jsfiddle.net/PVH5U/

$(document).ready(function () {
    $('.has-sub > a').click(function () {
        var submenu = $(this).next();
        if(submenu.is(":visible")){
            submenu.slideUp();
        }
        else{
            submenu.slideDown();
        }
    });
});

Answer №2

Give this coding format a shot:
HTML

      <div id="menu">
    <ul id="sub">

    <li>one</li>
    <li>two</li>
    <li>three<ul id="second">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul></li>
    <li>Four</li>
    <li>five</li>
    <li>six</li>

    </ul>
    </div>

CSS

     #menu{width:800px;height:82px;background-color:#666666;margin:0px 0px 0px 0px; border-radius:30px; text-align:center;}
    #menu ul {margin:0px;padding:0px;}
    #menu ul li{ border-radius:0px;float:left;list-style:none;margin:0px 4px 0px 4px; width:191px; padding-top:30px; height:50px;background-color:#99CC00; position:relative;}
    #menu ul li a{ text-decoration: none !important;}
    #menu ul li:hover{display:inline;background-color:#CCCCCC;border-radius:0px;margin:0px 4px 0px 4px; width:191px; height:45px;}

    /* First Select Menu */

    ul.sub li{ background-color:#00CCFF; display:inline; }
    ul.sub li{margin:25px 0px 0px 0px; padding:0px 10px 0px 0px; position:absolute; }
    .hover ul.sub li{ display: block;position:relative;/*relative*/ float:none; margin:0px 0px 0px 29px;
    padding:3px 2px 2px 0px;  width:150px; height:20px;  }

    /* Second Select Menu */
    .second li{ display:none;position:relative; float:none;  height:35px;
    margin:1px 0px 0px 8px;  padding:10px 0px 10px 0px;}
    .second li{ display: block; background-color:red; }
    .second{ position:relative; height:35px; margin:0px 0px 0px 4px;     padding:0px 0px 0px 0px;}

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

move div upwards from the bottom

Within my HTML page, I have a centered div that measures 640x480. I am looking to create another div that appears from the bottom edge of the original div, with dimensions of 640x400. This means only the top 80px of the original div will be visible. I&apo ...

jqueryhtmlcss

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

javascriptcssmarquee

Ensuring DIV Fills without Compromising Aspect Ratio

I am currently attempting to fill a div with an image in both width and height. However, I have only been able to control the width while the height respects the aspect ratio without filling the div completely. I have tried various combinations of backgrou ...

csswordpressbackground-imagefillbackground-size

Expanding the axes using Google Charts

Seeking to Expand Y-Axis I am attempting to stretch the Y-axis so that it counts up to 300 instead of just 100. The issue arises when I adjust the Y-axis to reach 300, as the values remain in the same position as they did when counting to 100. Fo ...

htmlcssgoogle-visualization

Why is the right float positioned below the container?

I am struggling to figure out why my float: right; div is appearing below the container div. I need help understanding how to resolve this issue. Can anyone provide an explanation? I faced a similar problem on a different website in the past, but I can&apo ...

htmlcss

No encoding specified in POST request headers

When sending an HTML page with UTF-8 encoding that contains a form, is it possible that the browser does not specify the encoding in the POST request header parameters? I decided to test this with the latest versions of Firefox 18 and Internet Explorer 9 ...

htmlformshttpencoding

jQuery does not pass data to bootstrap modal

I am currently working with the full calendar feature. Within this framework, I have implemented a modal that allows users to insert new events: <div id="fullCalModal_add_appointment" class="modal fade"> <div class="modal-dialog"> ...

javascriptjquerytwitter-bootstrapfullcalendarbootstrap-modal

Using Jquery to manipulate arrays based on options selected from a dropdown menu

I am currently working on a feature that suggests tags based on the selected category. This involves using a select box to choose a category and then displaying sub-categories in a list. Here is the current setup: <select id="categorySelect"> < ...

javascriptjqueryarrays

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

I have encountered a challenge that I need help with. On a webpage, there are multiple images of varying sizes. I am looking to create a feature where hovering over an image triggers the appearance of a div above it containing a button and text without dis ...

htmlcssbootstrap-4

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace

Is there a way to embed an AJAX submit form into a notification without the need for page refresh?

I have integrated the jQuery plugin toastr js () for notifications on my website. I am facing an issue where I want to include a contact form within the notification popup and submit it using AJAX. Despite having the form working fine outside of the toastr ...

javascriptjqueryhtmlajaxtoastr

Creating new rows in PHP form using different ID and name pairs

I am seeking a solution to dynamically add rows of inputs using a button. I have come across several examples, but most of them change the name attribute of the HTML elements (e.g. name = 'price1', name = 'price2'), causing issues with ...

javascriptphpjqueryhtml

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

javascripthtml

Progress bar display not available

I have recently developed a JavaScript quiz application and included a progress bar feature. While it works flawlessly offline on my laptop, I encountered an issue when uploading the files to Codepen.io - the progress bar fails to display. I would appreci ...

javascriptjqueryhtmlcssjquery-ui

Empty gap separating two side by side photos

Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and sett ...

htmlcss

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

I need assistance with customizing the checkout page on Wordpress Woocommerce. Specifically, I want to make the field 'billing_name' not required if the checkbox 'buy_on_company' is checked. Currently, I have successfully hidden ' ...

javascriptphphtmlwoocommerce

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

javascripthtmlinternet-explorermicrosoft-edge

Enlarge Django thumbnail when hovering over it in Django admin console

Looking to incorporate a CSS hover effect into this Django admin function that shows a thumbnail in the admin area. The goal is to enlarge the image when hovered over. def image_tag(self): if self.image: return mark_safe('<img ...

cssdjangoimageadminthumbnails

Using AngularJS $routeProvider can be challenging when integrating both AngularJS and jQuery

I am encountering an issue with my application that utilizes both Angular JS and jQuery JS for mobile and web functionalities. The problem arises when the route-provider fails to navigate to the intended page if both jQuery and Angular JS are integrated to ...

jqueryangularjs