Showing element on hover issue in CSS

Question

This is my fiddle: http://jsfiddle.net/2xnow6f8/2/. What I am trying to achieve is: - on hover statement on li to show my submenu. I saw this post . I tried to reproduce it but with no result. Can someone help me with this ? This is the code:

ul.mainmenu li:hover + div.header ul.mainmenu li div.submenu {display: block}

Jacob · Answer 1 · 2015-08-27T09:21:31.767

1

Its because ul.submenu is not directly after li

The + selector works like this:

Selects all <ul class='submenu'> elements that are placed immediately after <li> elements.

Since there are none,

Try adding a:hover instead of li:hover

http://jsfiddle.net/2xnow6f8/5/

For only hover on desktop:

http://jsfiddle.net/2xnow6f8/6/

edited Aug 27 '15 at 09:21

answered Aug 27 '15 at 09:16

Jacob

1,933
2
20
30

Thax but i do not want for a:hover I want li:hover. I need this for mobile version. because hover statement transforms in click in mobile. and when the user click on the item, instead of showing the submenu it will be redirected to url form my a tag – Attila Naghi Aug 27 '15 at 09:19
If I understood you correctly, add a media query to turn off the hover. – Jacob Aug 27 '15 at 09:21
my
has width:100%. So when the user clicks on my
then show the submenu. Now the user have to click on the as you post me. Are u understanding what i want :D ?

Attila Naghi

Aug 27 '15 at 09:24

Try putting the submenu directly under li and see if that works! – Jacob Aug 27 '15 at 09:24

score 0 · Accepted Answer · answered Aug 27 '15 at 09:22

If you want hover on li then you have to change in your HTML structure div.submenu should be next to li, then only your css will work, Take a look to following structure i have made some changes in Css also:

div.submenu {
    position: relative;
    left: 0px;
    display: none;
}
div.submenu {
    background: #FFF none repeat scroll 0% 0%;
    top: 35px;
    border-top: 5px solid #FFF;
    border-bottom: 5px solid #FFF;
    z-index: 15;
}
li:hover ~ div.submenu {display: block}

<ul class="mainmenu">
    <li>
        <a href="/index.php?id=5" title="Trouwen">Trouwen</a>
    </li>
    <div class="submenu">
        <ul class="submenulist">

            <li>
                <a href="/index.php?id=1478" title="Beoordelingen van gasten">Beoordelingen van gasten</a>
            </li>

            <li>
                <a href="/index.php?id=1222" title="Best Deal Day's">Best Deal Day's</a>
            </li>

            <li>
                <a href="/index.php?id=1466" title="Top Trouw Deal">Top Trouw Deal</a>
            </li>

            <li>
                <a href="/index.php?id=1415" title="Menukaart">Menukaart</a>
            </li>

            <li>
                <a href="/index.php?id=60" title="Mogelijkheden">Mogelijkheden</a>
            </li>
        </ul>
    </div>
</ul>

Then its nearly impossible with css. You can use `Jquery` or `Javascript` for this. — Manwal, Aug 27 '15 at 09:43

POZ · Answer 3 · 2015-08-27T15:38:57.463

0

Just change this selector:

ul.mainmenu li:hover + div.header ul.mainmenu li div.submenu

into this:

ul.mainmenu li:hover > div.submenu

Details of the changes:

Removed unneeded elements in selector (for example div.header is not present in your html
Changed the + selector into > to reflect the right position of the embedded sumenu

edited Aug 27 '15 at 15:38

answered Aug 27 '15 at 09:28

POZ

583
4
11

Added more details to my answer to be more accurate. – POZ Aug 27 '15 at 15:45

Showing element on hover issue in CSS

3 Answers3