Show submenu with CSS without using an unordered list


Tags: javascript,jquery,html,css

Problem :

I got a question regarding showing a submenu with CSS. I have the following HTML code:

<div class="navigation">
    <a class="active" href="/">Home</a>
    <a href="/">Test1</a>
    <a href="/">Test2</a>
    <div class="submenu-wrapper">
      <a href="/">Test3</a>
      <div class="submenu">
        <a href="/">Submenu1</a>
        <a href="/">Submenu2</a>
      </div>      
    </div>
    <a href="/">Test4</a>
</div>

Due to implementation restriction I can not change my structure to, for example a <ul> format.

I did some research on the web to find out how I could show my submenu by using CSS. I tried the following thing:

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

Can anyone tell my why this does not work and how could I solve this, with respect to my current implementation.

Full code here: JSFIDDLE

PS. Any answers like use bootstrap or transform your menu to a <ul> format is not what I am looking ;)



Solution :

Your code:

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

Your .submenu is not inside the a. You could use the sibling selector:

.navigation .submenu-wrapper a:hover + .submenu{display:block;}

But to make the submenu usable, make sure your .submenu-wrapper has the same height as its content (by giving it a fixed height or an :after{clear:both;} and do this:

.navigation .submenu-wrapper:hover .submenu{display:block;}

Since your .submenu is absolutely positioned, you also need to position its parent, or else .submenu will fall off the screen (because you gave it top:100% relative to body). Like this:

.navigation .submenu-wrapper {position: relative;}

Updated fiddle: https://jsfiddle.net/xrtjngdr/4/


    CSS Howto..

    How to create a sphere in css?

    How to change the colors of HTML form elements displayed in UIWebView?

    How to optimize an image sequence in Chrome?

    CSS - how to apply styles to first elements in a static generated list

    How to solve CSS -webkit-appearance issue

    How to inject a css class into an MvcHtmlString?

    How do I resize the border of the body as the window resizes in CSS

    How can I use :hover with multiple classes

    How erase extra black on drop down menu

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How to show/hide div on click with stricly HTML/CSS

    HTML/CSS How to auto-adjust the width of my container in order to show several images horizontally displayed?

    how can I add styles of structure to jquery plugin

    How to identify is a blog post has been selected or not?

    How do I get these two columns to have the same height at all times - CSS?

    How to position div's like this with CSS?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    How to hide the button keeping the position? [duplicate]

    How do I hide the parent of a nested list while keeping the nested list visible?

    How to remove the BG image on jQueryUI autocomplete combo (select)

    How to make the jQuery datePicker popup opaque and always in the foreground?

    How do I iterate through array and set classes individually?

    How to position text on a baseline?

    how to load different css files with different screen sizes?

    How can I get a CSS/jQuery animated menu similar to ajusto.com?

    How to change visibility of Calendar on textbox click

    How to set continuous box-shadow through all inline-block centered li elements

    How to add sub-menu (css) under actual sub-menu in WordPress

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    How to Create Grid/Tile View with CSS?