Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

I am attempting to design a pure CSS on-hover horizontal menu.

I have made some progress on my design, as shown in http://jsfiddle.net/dq8z192L/11/

The goal is to have a menu that expands horizontally when hovered over. Each tab reveals a set of links below it.

I then modified it to create http://jsfiddle.net/dq8z192L/13/. The objective was to display the links of the leftmost tab by default and show the links of other tabs on hover.

However, I encountered an issue with the CSS2 code. Despite including the 

.linkgroup2:hover , .linkgroup3:hover { display:block; }
line in both CSS1 and CSS2, I am unable to access the sets of links by hovering over the HEADING 02 or HEADING 03 tabs.

I am puzzled by this and would appreciate any guidance on what I might be doing wrong.

NOTE: The HTML code remains the same for both cases.

HTML

<div>
    <div id="c1">HEADING 01</div>
    <div id="c2">HEADING 02</div>
    <div id="c3">HEADING 03</div>
    <ul class="linkgroup1">
        <li><a href="#" title="">link 01</a></li>
        <li><a href="#" title="">link 02</a></li>
        <li><a href="#" title="">link 03</a></li>
    </ul>
    <ul class="linkgroup2">
        <li><a href="#" title="">link 04</a></li>
        <li><a href="#" title="">link 05</a></li>
        <li><a href="#" title="">link 06</a></li>
    </ul>
    <ul class="linkgroup3">
        <li><a href="#" title="">link 07</a></li>
        <li><a href="#" title="">link 08</a></li>
        <li><a href="#" title="">link 09</a></li>
        <li><a href="#" title="">link 10</a></li>
    </ul>
</div>
<div><p>some stuff here ...</p></div>

CSS 1 (partially successful CSS)

#c1, #c3 { width: 33%; float:left; background-color:#ef6;}
#c2 { width: 34%; float:left; background-color:#eee; }
ul { list-style:none; }
li { display: inline; }

.linkgroup1 , .linkgroup2 , .linkgroup3 { display:none; }

#c1:hover ~ .linkgroup1 { display:block; }

#c2:hover ~ .linkgroup2 { display:block; }
#c2:hover ~ .linkgroup1 { display:none; }
#c2:hover ~ .linkgroup3 { display:none; }

#c3:hover ~ .linkgroup3 { display:block; }
#c3:hover ~ .linkgroup1 { display:none; }
#c3:hover ~ .linkgroup2 { display:none; }

.linkgroup1, .linkgroup2 , .linkgroup3 { padding-top:3em; }
.linkgroup1:hover , .linkgroup2:hover , .linkgroup3:hover { display:block; }

.linkgroup1 { background-color:#6e7fe4; }
.linkgroup2 { background-color:#f4e32b; }
.linkgroup3 { background-color:#b3ffff; }

CSS 2 (unsuccessful CSS)

#c1, #c3 { width: 33%; float:left; background-color:#ef6;}
#c2 { width: 34%; float:left; background-color:#eee; }
ul { list-style:none; }
li { display: inline; }

.linkgroup2 , .linkgroup3 { display:none; }

#c2:hover ~ .linkgroup1 { display:none; }
#c2:hover ~ .linkgroup3 { display:none; }
#c2:hover ~ .linkgroup2 { display:block; }

#c3:hover ~ .linkgroup1 { display:none; }
#c3:hover ~ .linkgroup2 { display:none; }
#c3:hover ~ .linkgroup3 { display:block; }

.linkgroup1, .linkgroup2 , .linkgroup3 { padding-top:3em; }
.linkgroup2:hover , .linkgroup3:hover { display:block; }

.linkgroup1 { background-color:#6e7fe4; }
.linkgroup2 { background-color:#f4e32b; }
.linkgroup3 { background-color:#b3ffff; }
cssmenumenuitem

Answer №1

To resolve the issue without modifying the html structure, absolute positioning of the <ul> elements is the key. By adjusting the z-index and taking the elements out of the flow, you can ensure that the .linkgroup1 does not obstruct the other uls and affect the :hover behavior.

Key points to consider:

/* Make sure to adjust the height of the wrapping div to accommodate the ul height when using position:absolute - consider naming the div .menu for clarity */
body > div {position:relative;height:60px;}

/* Use absolute positioning to remove the ul from the document flow */
ul { 
    position:absolute;
    top:20px;
    left:0;
    width:100%;
    list-style:none;
    display:block;
    margin:0;
    padding:0;
}
/* Increase the z-index of the second and third menu to ensure that :hover is always on top, leaving the first one below when the second is hovered */
.linkgroup2, .linkgroup3 { display:none;z-index:2; }

Check out the live example: http://jsfiddle.net/mkwjvdz8/

Answer №2

Check out this workaround I've come up with for your specific needs: jsFiddle. In your second jsFiddle, the issue arises when the cursor transitions from the #c2 or #c3 areas to the linkgroup2 or linkgroup3 areas. This causes the linkgroup1 element to reappear and the CSS rules specifically for when the cursor is over #c2 or #c3 no longer apply since the cursor is now over the linkgroup1 area.

Here is the updated code I implemented in my fiddle.

HTML:

<ul>
    <li>
        <div id="c1">HEADING 01</div>
        <ul class="linkgroup1">
            <li><a href="#" title="">link 01</a>

            </li>
            <li><a href="#" title="">link 02</a>

            </li>
            <li><a href="#" title="">link 03</a>

            </li>
        </ul>
    </li>
    <li>
        <div id="c2">HEADING 02</div>
        <ul class="linkgroup2">
            <li><a href="#" title="">link 04</a>

            </li>
            <li><a href="#" title="">link 05</a>

            </li>
            <li><a href="#" title="">link 06</a>

            </li>
        </ul>
    </li>
    <li>
        <div id="c3">HEADING 03</div>
        <ul class="linkgroup3">
            <li><a href="#" title="">link 07</a>

            </li>
            <li><a href="#" title="">link 08</a>

            </li>
            <li><a href="#" title="">link 09</a>

            </li>
            <li><a href="#" title="">link 10</a>

            </li>
        </ul>
    </li>
</ul>
<div>
    <p>some stuff here ...</p>
</div>

CSS:

#c1, #c3 {
    background-color:#ef6;
}
#c2 {
    background-color:#eee;
}
ul {
    list-style:none;
    padding: 0px;
}
ul li {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}
ul li ul {
    width: 95%;
    position: absolute;
    left: 7px;
}
ul li:hover ul {
    display: block;
}
ul li ul {
    display: none;
}
ul li:first-child ul {
    display: block;
}
.linkgroup1, .linkgroup2, .linkgroup3 {
    padding-top:3em;
}
.linkgroup1 {
    background-color:#6e7fe4;
}
.linkgroup2 {
    background-color:#f4e32b;
}
.linkgroup3 {
    background-color:#b3ffff;
}

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

Aligning Font Awesome icons inside md-buttonsFinding the perfect alignment for

I am attempting to center font awesome icons within a button so that they align perfectly with the text on a toolbar. Below is the code snippet I am working with: <div ng-app="app"> <md-toolbar> <div class="md-toolbar-tools" md-tall ...

javascriptcssangularjsfont-awesomeangular-material

When I separate the div into its own line in the HTML/CSS code, the behavior changes significantly

I'm encountering an issue with my HTML/CSS structure: .im-wrapper { width: 100%; height: 100%; position: fixed; overflow: hidden auto; top: 0; left: 0; } .im-backdrop { background-color: var(--darkblack); opacity: 80%; width: 1 ...

htmlcssbootstrap-5

Personalize the style of ordered lists

Greetings! I am attempting to customize the style of an ordered list like the one shown in the image on another website. https://i.sstatic.net/BQok4.png However, instead of the circle used in that picture, I want to use a different CSS Image like the one ...

csshtml-lists

Top methods for incorporating whitespace on both sides of the page

Currently working on a ReactJS/MaterialUI webapp and looking to enhance the layout. Seeking advice on whether it's best practice to add padding or margin to create space on the left and right side of the page, similar to popular websites like Stack Ov ...

cssreactjsmaterial-ui

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Find my custom css menu here: Custom CSS Menu On hovering over "about us", the "our clergy" sub-menu appears automatically. I need it to show only when hovering over "our clergy". This screenshot is from Firefox, but webkit browsers like Chrome show a sl ...

wordpressmenucss

Styling the navigation menu for mobile devices

How can we transition from a menu like this : https://i.sstatic.net/qQ2k1.png to this when the screen size reaches a specific width: https://i.sstatic.net/AUM4v.png In essence, replacing certain texts with icons. Is pre-defining it and changing the dis ...

css

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

The code snippet below is from my frameset.jsp file: </head> <iframe width="100%" src="mail_frame.html"></iframe> <iframe width="105px" height="100%" src="sidenav.html" id="leftnav" name="leftnav" ></iframe> ...

htmlcss

Adjusting Screen Size for Lottie Animation in React.js

I need assistance with resizing a lottie animation component on my website's landing page to set its display to none on mobile devices. How can I achieve this? See the lottie component code below: import React from "react"; import Lottie fr ...

cssreactjsbootstrap-4react-hookslottie

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

javascripthtmljquerycssbootstrap-5

Discovering the way to retrieve background height following a window resize using jQuery

Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...

javascriptjquerycssbackground

Background Image Division (Twitter Bootstrap)

I am facing a challenge while creating a module with a span8 width and varying height. The div contains an image that dictates its height, with text overlaid on the image. My issue lies in preventing part of the image from getting cropped when Bootstrap re ...

htmlcsstwitter-bootstrapresponsive-design

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

javascriptjquerycss

The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

I have been struggling to prevent my modal box from disappearing, despite trying various solutions found online. How can I ensure that it stays visible? Here is the code in question: <html> <head> <title> Test Slides </titl ...

javascripthtmlcsstwitter-bootstrap

Turn a textfield on and off in real-time

Hey everyone, I've been working on making a textfield dynamic and I wanted to share my code with you: <input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false"> <input type="text" id="test2 ...

javascriptjqueryhtmlcssonfocus

Incorporating <span> elements into a comma-separated list using Jquery on every other item

When I receive a comma-separated list of items from a database and insert them into a table cell, I want to apply alternating styles to make it easier for users to distinguish between them. For example: foo, bar, mon, key, base, ball I'm looking to ...

javascriptjquerycss

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Is it possible for the modal button to validate if the textboxes before it are empty? If they are, can we prevent the user from proceeding until they are filled? Check out the code below: <form class="form-horizontal form-signin-signup" action="signup ...

phpjqueryhtmlcssbootstrap-modal

Make sure all the table rows have the same height to completely fill the table regardless of the number of rows

Looking for a solution to create a table with a fixed height of 280px, whether it has 3 or 4 rows. Is there a method to adjust the row heights based on the number of rows in the table, so that they fill up the table's height? To clarify, when the ta ...

htmlcss

The MuiPrivateTabScrollButton alters the dimensions and flexibility properties using CSS

I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...

htmlcssreactjsmaterial-ui

Unable to change Gutters to 0 in the .container-fluid class in Bootstrap 5.2

I have gone through all the answers related to my question, but I couldn't find a solution for it. Below is the HTML code with Bootstrap 5.2 that I am working on: <section id="title"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrapcss-selectors