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 · Accepted Answer · 2015-08-27 09:21:31Z

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, 2015 at 9:21

answered Aug 27, 2015 at 9:16

Jacob

2,0912 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Attila Naghi Over a year ago

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

Jacob Over a year ago

If I understood you correctly, add a media query to turn off the hover.

Attila Naghi Over a year ago

my <li> has width:100%. So when the user clicks on my <li> then show the submenu. Now the user have to click on the <a> as you post me. Are u understanding what i want :D ?

Jacob Over a year ago

Try putting the submenu directly under li and see if that works!

Manwal · Accepted Answer · 2015-08-27 09:22:55Z

0

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>

answered Aug 27, 2015 at 9:22

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

1 Comment

Manwal Over a year ago

Then its nearly impossible with css. You can use Jquery or Javascript for this.

POZ · Accepted Answer · 2015-08-27 15:38:57Z

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, 2015 at 15:38

answered Aug 27, 2015 at 9:28

POZ

5914 silver badges11 bronze badges

1 Comment

POZ Over a year ago

Added more details to my answer to be more accurate.

Collectives™ on Stack Overflow

Showing element on hover issue in CSS

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related