Attempting to implement a secondary level of dropdown menu using CSS

As I begin, I want to mention that I have thoroughly reviewed all the sub sub menu questions, but unfortunately, I couldn't find anything that aligns with the code I currently have in place. Any assistance will be greatly appreciated.

My current task involves adding a sub sub menu. Initially, I thought I had it all figured out, but I'm facing some challenges with understanding how to make the child combinators function. If you could focus on that aspect of the code, you'll make it to my 'saint list.'

Additionally, the issue I'm encountering is that the sub sub menu fails to extend to the right and appear next to its parent element as intended. I hope this explanation makes sense.

You can preview the fiddle here.

Below is the CSS:

/*------------------------- Header ---------------------------*/
 #header {
 background: #333 url(../images/bg-header2.png) repeat-x;
 height:184px;
 margin:15px 0 0;
}
#header div {
margin:0 auto;
padding:28px 0 0;
position:relative;
width:500px;
}
#header div ul {
height:118px;
left:10px;
list-style:none;
margin:0;
overflow:visible;
padding:0;
position:absolute;
top:10px;
float: left;
width: 500px;
}

/* Rest of the CSS code follows... */

Here is the HTML:

<div id="header">
<div>   

    <ul>
        <li>    <a href="index.html">Home</a>

        </li>

        <li class="selected">   <a href="portfolio.html">Portfolio</a>

            <ul>
                <li>    <a href="fantasy.html">Fantasy</a>

                </li>
                <li>    <a href="makeup.html">Makeup</a>

                    <ul>
                        <li><a href="glamour.html">Glamour Makeup</a>
                        </li>

                        /* More HTML code continues... */

                    </ul>
                </li>

                /* More HTML code continues... */

        </div>
</div> 

Any assistance provided will be highly appreciated. Thank you for your time and consideration. :)

Answer №1

There are three key techniques that can assist you:
the first is using '>' in css selectors.
the second involves utilizing the following code:

ul ul{
    display:none;
}
ul > li:hover > ul {
    display:block;
}

This code causes a ul block to be displayed when you hover over its '< li >' parent.
The third technique involves utilizing css positions to adjust submenus position, like so:

#header > ul{
    position:relative;
}
li{
    position:relative;
}
ul ul{
    position:absolute;
    left:120px;
    top:0;
}

Answer №2

Another option is to utilize a simple example of a nested menu with unlimited levels. Check out this jsfiddle link and customize the size and color to fit your needs.

Here is the HTML code:

<ul class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a>
        <ul>
            <li><a href="#">sub item1</a></li>
            <li><a href="#">sub item2</a></li>
            <li><a href="#">sub item3</a>
                <ul>
                    <li><a href="#">sub sub item 1</a></li>
                    <li><a href="#">sub sub item 2</a>
                        <ul>
                            <li><a href="">sub sub sub item1</a></li>
                            <li><a href="">sub sub sub item2</a></li>
                            <li><a href="">sub sub sub item3</a>
                                <ul>
                                    <li><a href="">yes why not?</a></li>
                                    <li><a href="">you can still continue</a></li>
                                    <li><a href="">if you want</a></li>
                                    <li><a href="">you can try.(-;</a></li>
                                </ul>
                            </li>
                            <li><a href="">sub sub sub item4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">sub sub item 3</a></li>
                </ul>
            </li>
            <li><a href="#">sub item4</a></li>
        </ul>
    </li>
    <li><a href="#">item3</a></li>
</ul>

And here is the CSS code:

ul.menu{
    position: relative;
}

ul.menu li{
    padding: 0;
    margin: 0;
    position: relative;
    border: 1px solid;
}

ul.menu > li{
    float: left;
    padding: 10px 45px;
}

ul.menu > li li{
    padding: 7px;
}

ul.menu , ul.menu ul{
    list-style: none;
    padding: 5px;
    margin: 0;
    overflow: visible;
}

ul.menu li:hover > ul{
    display: block;
}

ul.menu ul{
    display: none;
    position: absolute;
    left: -6px;
    top: 37px;
    width: 160px;
}

ul.menu ul:hover{
    display: block;
}

ul.menu ul ul{
    left: 158px;
    top: 0;
}

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 is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

modify CSS style once the modal has been hidden

Is there a way to change the default background color of my table row back to normal after closing the modal window that appears when I click on it? <tr class='revisions'> <td>{{ $revision->date_of_revision->format(' ...

Mobile menu in Bootstrap failing to show up

Hello, I am creating a website using Bootstrap and I am encountering an issue with the hamburger menu not appearing when I resize the screen. Here is the code I am using: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

Sculpting the excess from a div-generated HTML button

I need help with adjusting the appearance of a link to make it look like a button. Currently, the button looks too "fat" because of the red background around the text. How can I reduce this effect? I've tried tweaking the width of the div, but that j ...

Arrange the divs alongside one another within a container and ensure that the container adjusts its width to fit the children

I am in need of a container div: This div should adjust its width based on the content within. I would like the child elements to align horizontally. The container itself should form a single horizontal line. I prefer not to use flex because it tends to ...

Effortlessly switching classes in JavaScript for seamless transitions

I'm currently working on an animation project where I want the title to be visible on the page initially, and then slowly fade away as you scroll down, with a subtitle fading in right after. While I've managed to get the title part working, I&apo ...

Having trouble aligning my slider in the center

Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posti ...

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

Having a fluid grid with 3 blocks in one row, each set to width:33.3%. The images within these blocks are set to width: 100% and height: auto. I am looking to implement a zoom-in effect on hover for these images without changing the height of the blocks. I ...

What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

When I view my website on mobile devices, only the logo appears in the navbar, not the other elements. Can you help me troubleshoot this issue? NavBar HTML Code: .navbar-logo { width: 93.75px; height: 23.5px; margin-left: 10rem; } .navba ...

Tips for hiding text on hover effect

I'm currently working on a menu where each item displays text that is replaced by an email address on hover. However, I am struggling to remove the text during the hover state. Below is the code I have written so far: #home { font: 30px 'Le ...

Aligning the Navigation icons on my webpage

<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?about">About</a></li> <li><a href="index.php?products">Products</ ...

Embed JavaScript code in the head section of the webpage to guarantee its presence even following a page refresh

We recently obtained an innovative Enterprise Talent Management Solution that is cloud-based. One standout feature allows users to incorporate HTML Widgets with scripts on the primary Welcome Page. The customization options for the Welcome Page UI are qui ...

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

My goal was to create a table using divs with fixed headers while scrolling vertically. However, I encountered an issue where the header width seemed to shrink and became misaligned with the rows. Even setting the width to 100% did not resolve this probl ...

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

Is there a CSS alternative to using <br clear=all> on divs that do not have set heights?

Back in the day, I used to rely on <br clear=all> at the end of a div, without specifying a height value in CSS, just to control its height. These divs would expand and contract based on the content within. Is there a more elegant approach to make ...

Tips on incorporating a parent selector into a relative CSS selector in Selenium with Python

Let me do my best to articulate the issue. This inquiry pertains to selenium in Python. Take a look at this example: for row in driver.find_elements(By.CSS_SELECTOR, "div[style='overflow: hidden;'] > div > div:nth-child(3)"): ...

Variations in the appearance of scrollbars on the x-axis and y-axis within a single <div> element

Let's say we have a div element like this: <div class="nav-menu"></div> I want to customize the CSS style for scrollbar using the ::scrollbar pseudo-element: .nav-menu::-webkit-scrollbar { width: 8px; background: white; ...

When a media query is activated, the Flex item mysteriously vanishes from

UPDATE I followed the suggestion in Ezra Siton's answer and changed the media query display to block, which successfully resolved the issue! Within my html code, I have a parent column flexbox containing two children. The second child is itself anoth ...

Issue with maintaining image aspect ratio; unable to utilize background-image: cover property

If what I am attempting is not feasible, please inform me. I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fin ...