Hoverable Dropdown Menu Options

[tomgraz]

I'm trying to spiff up my website with a hoverable dropdown menu. I picked one up I like well enough from w3schools (can I say that?). The problem I have with it is that it goes behind the sliding screens on my main page. Is there a setting that will make such an item always be in front?

Thanks for any suggestions,

Tom

[pandy]

Is any of the thingamajigs flash? Can you post the URL to sample page?

I picked one up I like well enough from w3schools (can I say that?).

Sure you can. What you can't do is trust them.

[Christian J]

I'm trying to spiff up my website with a hoverable dropdown menu.

Just be aware that hover menus with links at the top level don't work well on touch screens, since tapping the top link fires both a click and a mouseover event, activating the top link at the same time as the dropdown is opened.

Also they usually don't work with keyboard navigation.

This post has been edited by Christian J: Dec 3 2016, 10:55 AM

[tomgraz]

Just be aware that hover menus with links at the top level don't work well on touch screens, since tapping the top link fires both a click and a mouseover event, activating the top link at the same time as the dropdown is opened.

Also they usually don't work with keyboard navigation.

Thanks for pointing that out. I'm going to reconsider using hover menus.

This post has been edited by tomgraz: Dec 5 2016, 09:17 AM

[pandy]

So? Flash or not?

[Christian J]

Thanks for pointing that out. I'm going to reconsider using hover menus.

This one should work with touch screens (since it has no links at the top level), but not with keyboard navigation:

CODE

ul, li {
margin: 0;
padding: 0;
list-style: none;
}

.dropdown {cursor: pointer;}

.dropdown > li {
float: left;
width: 7em;
}

.dropdown ul {display: none;}
.dropdown > li:hover ul {display: block;}


<ul class="dropdown">
<li>dropdown 1
    <ul>
    <li><a href="#sub1.1">sub 1.1</a></li>
    <li><a href="#sub2.1">sub 1.2</a></li>
    <li><a href="#sub3.1">sub 1.3</a></li>
    </ul>
</li>
<li>dropdown 2
    <ul>
    <li><a href="#sub2.1">sub 2.1</a></li>
    <li><a href="#sub2.2">sub 2.2</a></li>
    <li><a href="#sub2.3">sub 2.3</a></li>
    </ul>
</li>
</ul>