Enhance your CSS horizontal submenu by incorporating a submenu list

My menu includes submenus like this:

This is the HTML code:

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#nogo"><b>Home</b>
</a></li></ul>



<ul class="select"><li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">Fishermen at Sea</a></li>
        <li><a href="#nogo">The Shipwreck</a></li>
        <li><a href="#nogo">The Vale of Ashburnham</a></li>
        <li><a href="#nogo">Crossing the Brook</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<ul class="current"><li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
    <ul class="sub">
        <li><a href="#nogo">The Hay Wain</a></li>
        <li><a href="#nogo">Brighton Beach</a></li>
        <li><a href="#nogo">Malvern Hall</a></li>
        <li class="sub_show"><a href="#nogo">Salisbury Cathedral (#1, #2)</a></li>
        <li><a href="#nogo">Weymouth Bay</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Girl with Green Eyes</a></li>
        <li><a href="#nogo">The Dream</a></li>
        <li><a href="#nogo">Woman in Blue</a></li>
        <li><a href="#nogo">The Yellow Dress</a></li>
        <li><a href="#nogo">The Piano Lesson</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Large Bathers</a></li>
        <li><a href="#nogo">Onions and Bottles</a></li>
        <li><a href="#nogo">Mardi Gras</a></li>
        <li><a href="#nogo">Still Life</a></li>
        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
    </ul>
</div>

However, I want to include a submenu under 

John Constable -> Salisbury Cathedral like -> (#1 , #2 )
as follows:

What would be the simplest way to add such a list?

Here is the jsfiddle link

htmlcssmenu

Answer №1

This solution may be a bit more intricate compared to others, but I believe it perfectly meets your requirements as you desire: http://jsfiddle.net/P2kgN/5/

Here is the HTML code snippet:

<li class="sub_show"><a href="#nogo">Salisbury Cathedral</a>
<ul class="subChild">
   <li><a href="#"> #1 </a></li>
   <li><a href="#"> #2 </a></li>
</ul>

CSS code for styling:

.sub_show:hover .subChild{display:block}

.sub_show .subChild{
    display:none;
    list-style:none;    
    float:left;
    width:100%;
    clear:both;
    padding:0 !important;    
    background: #dbe5e6;
    background: -moz-linear-gradient(top,  #dbe5e6 1%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#dbe5e6), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #dbe5e6 1%,#ffffff 100%);
    background: -o-linear-gradient(top,  #dbe5e6 1%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #dbe5e6 1%,#ffffff 100%);
    background: linear-gradient(to bottom,  #dbe5e6 1%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe5e6', endColorstr='#ffffff',GradientType=0 );
}

.sub_show .subChild li{
    width:100%;
    cursor:pointer;    
}

.sub_show .subChild li a{
    cursor:pointer !important;
    display:block;width:100%;
    background:none !important;
    padding:0 !important;
    text-indent:10px;
    text-align:left;    
}

.sub_show .subChild li:hover a{
    color:#000 !important;
}

Answer №2

Check out this suggestion: Include the children of your submenu in a class called "sub-child"

<li class="sub_show">
  <a href="#nogo">Salisbury Cathedral</a>
   <!--child -->
    <ul class="sub-child">
         <li><a href="#"> #1 </a></li>
         <li><a href="#"> #2 </a></li>
    </ul>
</li>

Here is the CSS style for sub-child:

li.sub_show .sub-child {
 display: none;
}

li.sub_show:hover .sub-child {
  display: block;
  list-style: none;
  width: 100px;
}
li.sub_show:hover .sub-child a {
  width: 100px;
  height: 30px;
}

View the demo here

Answer №3

Just made a few CSS tweaks

.select_sub ul li {
    position: relative;
}

.nav .current .sub li:hover ul {
    display: inline;
}

.select_sub ul ul {
    position: absolute;
    bottom: -28px;
    left: 0;
    background: #999;
    min-width: 140px;
    text-align: left;
    display: none;
}

.select_sub ul ul li {
    float: none;
}

Check out the updated fiddle here:

http://jsfiddle.net/vamsikrishna981/WnAHk/

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 z-index property seems to be malfunctioning when used in conjunction with the relative and absolute positioning

I have created a dropdown menu using pure CSS3, but I am facing an issue with the z-index property. The dropdown list is appearing above the menu when it should be dropping below it. I have spent all day trying to troubleshoot this problem to no avail, so ...

htmlcssz-index

Managing active dropdown menus in VueJS

I'm having trouble figuring out why my navigation menu and method to open subitems on click are not working correctly. [![dropdown_menu][1]][1] new Vue({ el: '#app', data: { //menu "menu_title": "a", "child_ro ...

javascripthtmlcssvue.jsvuejs2

I am experiencing an issue where the submit button in my HTML form is unresponsive to clicks

Welcome to my HTML world! <form action="petDetails.php" id="animalInput"> <ul> <li> <label for="dogName">Enter Dog's Name:</label><input id="dogName" type="text" name="dogName" /> </l ...

javascripthtmlcssajax

The login form is unable to produce any post data upon submission

My login form is contained within a Bootstrap modal component. After filling out the input fields and clicking submit, the modal closes without any action. When inspecting the element under the networks tab, no post request is visible. <div class="mod ...

javascriptjqueryhtmltwitter-bootstrappassport.js

Guide to creating a JavaScript function that receives inputs from several other functions

I need help adding a new function to this code that will show the difference between the values calculated by the existing functions, but I'm not sure how to go about implementing it. <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtml

Ways to incorporate a floating label

https://i.sstatic.net/vwnjl.jpg Can anyone provide guidance on how to incorporate the floating label as depicted in the image? ...

htmlcss

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss

Convert a decimal number to a suitable Alpha value for an RGBA CSS color

I'm currently working on filling a Canvas element with a linear gradient that transitions from White to a dynamic color that will be determined at runtime. In order to achieve this, I have written a function that takes a floating-point number as its ...

javascripthtmlcsscanvas

CSS styling can be used to generate a line break above and below a drop-down menu

While working on my CSS drop down menu, I noticed that it was generating unwanted line breaks before and after the dropdown. Below is the HTML code: <body> <!--nav class="navi"--> <div class="navi" id="navi"> <ul> <li& ...

javascripthtmlcssdrop-down-menu

When using Next.js, the global.css file is not loaded until a manual page refresh is performed. Additionally, the styles.js

The current situation is that styling is being applied in two places: global.css and index.js using styled-components. Challenge When the local server is started or restarted, and a manual page refresh is done, all styles are correctly applied. Any style ...

cssreactjsnext.jslocalhostrefresh

Troubleshooting SharePoint 2013 Background Color Display Issue on Internet Explorer 8

I am working on a SharePoint 2013 website. Strangely, IE8 is not displaying the background color of the title bar correctly. However, it seems to work perfectly fine in all other browsers including IE9, IE10, and more. Has anyone else come across this issu ...

htmlcssinternet-explorersharepointsharepoint-2013

The placement of my image shifts when I switch to the mobile view

Having a small issue with my image alignment. When I switch from portrait to landscape view, the image is no longer centered. The margin remains the same as in portrait view and I'm unsure how to adjust it. I've attempted changing the margins of ...

javascriptimagecssmobileposition

CSS problem with image dimensions

After using a code to add store images and links in Wordpress through a Widget, I have encountered an issue where the images box is extending in width inexplicably. Here is a screenshot of the problem - https://i.sstatic.net/Z4iZq.png And here is the de ...

htmlcssmedia-queries

Coping with validation problems across multiple pages in a form-linked Datatable

I have utilized a datatable to create a table where each row contains either an input or select field, with pagination across multiple pages. The problem arises when the datatable renders 10 rows of HTML elements by default and jQuery validation renders p ...

jquerycsssql-serverajaxdatatables

Troubleshooting problem with BxSlider and collapsible elements in Bootstrap

I'm facing a challenge trying to integrate a bootstrap collapsible element into a bxslider slide without success. Does anyone have any suggestions on how to resolve this issue? Feel free to check out my sample code on the following link: ...

javascriptjquerycsstwitter-bootstrapbxslider

Having trouble getting CSS calc to work on a table cell? Wondering how to make two out of four columns the same width?

Is it possible that CSS calc doesn't work on a table cell? It seems that no matter what size I change 90px to, the result looks the same. Even after trying various calculations with calc, I cannot seem to achieve the desired number of 230. The goal i ...

css

MatDialog displaying no content

I found this tutorial on how to implement a simple dialog. The issue I'm facing is that the dialog appears empty with no errors in the console. Even after making changes to my dialog.component.html or dress-form.ts, nothing seems to reflect in the o ...

htmlangulartypescriptangular-materialdialog

Tips for personalizing your Tumblr feed on a website

Good day, dear readers! I am currently working on a single-page website for my friend's band and have decided to incorporate a Tumblr feed instead of a traditional news section. The only issue is that I lack expertise in JS / JQuery. As of now, the ...

javascriptjquerycssfeedtumblr

CSS guidelines for layering shapes and divs

Currently, I am in the process of developing a screenshot application to enhance my understanding of HTML, CSS, and Electron. One of the key features I have implemented is a toggleable overlay consisting of a 0.25 opacity transparent box that covers the en ...

javascripthtmlcsselectron

Exploring the benefits of utilizing CSS Variables for adjusting position offsets in

I've been learning about using native CSS variables to declare colors, but I'm curious if it's possible to create a variable for adjusting top and left positions. In my CSS template, text boxes are overlaid on an image, and the layout change ...

cssvariables