使用CSS显示子菜单而不使用无序列表

Question

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 ;)

Answer 1

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/

Answer 2

You can achieve this by changing

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

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

You also have to add

.submenu:hover{
  display:block;
}

Because if you want to click on your submenu, the links will disappear

Answer 3

Just a few small changes and you're golden.

See the comments in the code below for your changes.

 .navigation { margin: 0; padding-left: 0; list-style: none; float: left; } .navigation .submenu-wrapper { float: left; display: block; position: relative; /* add relative position */ } .navigation > a, .navigation .submenu-wrapper a { float: left; position: relative; display: block; font-size: 20px; padding-right: 14px; padding-left: 14px; padding-top: 5.5px; padding-bottom: 8.5px; color: #000; text-decoration: none; } .submenu { position: absolute; display: none; /* display none */ top: 100%; left: 0; z-index: 1000; float: left; min-width: 160px; list-style: none; font-size: 18px; text-align: left; background-color: #245d94; border: 1px solid #fff; border-radius: 0; box-shadow: none; border-left: none; border-right: none; } .navigation a:hover { color: #fff; background-color: #245d94; } .navigation a.active { color: #fff; background-color: #e36c0a; } .navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */ display: block; } 

 <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>