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 make css curve box with gradient & shadow

    How do you organize your template structure in CodeIgniter?

    How do I make a class/div behave like it were floating?

    How to create a multiple columns with HTML CSS

    How to center nested divs with rotation with CSS3?

    How to read contents of an external script/style?

    How to style using nth-of-type within a ul tag?

    how to make a CSS animation end point the right edge of the browser

    how to change an existing website to bootstrap [closed]

    How do I get a CSS Selector to Skip Over?

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    How to shield a HTML tag from CSS?

    On Edge Browser, how to change input placeholder text color using CSS?

    How not to override property in CSS

    HTML, CSS: How do I stretch an element up to the edge of the page?

    How to make the footer stick to the bottom?

    How can I put element in the middle of vertical align?

    How to make a bootstrap modal fade in from the bottom?

    How do I determine if truncation is being applied in my style through JS?

    how to center perfectly image and text inline in the center of page

    Rails 3 - will_paginate plugin - how to style it

    How to create square image thumbnails using only CSS

    How to Link to Images in CSS file in RoR 3.2 Project?

    How do I style HTML in a JEditorPane?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to Bring a h1 to top of the div?

    How to remove hover effect from CSS?

    How to add 2 jScrollPane to my page and each one has different CSS?

    How to remove the double scroll?

    How do I center text vertically with css [duplicate]