Unable to make dropdown menu from sticky menu

[raman2572]

I am trying to make dropdown menu out of my sticky menu. But I dropdown categories are showing horizontally.

Please solve this issue

Html

<div id="sticky">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://www.domain.com/2013/07/best-value-money-ultrabooks-2013-review.html">Ultrabooks</a></li>
  <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
<li><a href="http://www.domain.com/2013/07/best-car-gps-tracker-review.html">GPS Devices</a></li>
<li><a href="#">Top↑</a></li>
</ul>
</div>

CSS

#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
width: 100%;
  border-radius: 0 0 0.5em 0.5em;
}


#sticky {
position:relative;
max-width:100%;
background:#DDD;
}

#sticky ul {
width:100%;
text-align:center;
margin:0;
padding:0;
}

#sticky li {
display:inline-block;
list-style-type:none;
padding:0;
}

#sticky li a {
color:#333;
display:inline-block;
font-size:13px;
font-style:normal!important;
font-weight:700;
letter-spacing:2px;
text-decoration:none;
text-transform:uppercase;
padding:20px;
}
#sticky li a:hover
{
    text-decoration: none;
    color: #bf0808;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
  -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.sticky ul ul {
    display: none;
  margin-left: 200px;
}

    .sticky ul li:hover > ul {
        display: block;
    }

[Paulie_D]

Your #sticky div does NOT have a class of .sticky in the HTML you posted.

So this

.sticky ul ul {
  display: none;
  margin-left: 200px;
}

.sticky ul li:hover > ul {
  display: block;
}

is wrong.

Try

#sticky ul ul {
  display: none;
  margin-left: 200px;
}

#sticky ul li:hover > ul {
  display: block;
}

or give the div a class of .sticky.

[raman2572]

Thanks @pauli_d for reply.
But it’s still not working

check here http://codepen.io/raman2572/pen/AGcJL

[Paulie_D]

I will look at the Codepen when I get back to the office but my first advice is to design a working dropdown menu first and then worry about how it integrates with a fixed menu.

[lrelia]

Hope will help.http://codepen.io/lrelia/pen/HeLts I use ‘float:left’ instead of ‘display:inline’

[Paulie_D]

Actually, I prefer display:inline-block to float but that’s just me.

However, my previous comment still applies.

[Paulie_D]

Here’s one I keep around for reference you might be able to adapt.

http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

[lrelia]

@Paulie_D,HAHA,that’s true.Why do you prefer ‘display:inline-block’?

[raman2572]

Thanks Irelia but whenever I hover on parent item, menu breaks down

[Paulie_D]

Why do you prefer ‘display:inline-block’?

I don’t have to clear floats and centering is much easier. It does have a couple of issues but nothing that can’t be simply overcome.

@raman2572

Did you look at the menu I provided? It should be simple enough to adapt.

http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

[Alex Naidovich]

If this topic is still relevant in 2018 (and it actually is, as my dropdown has been breaking down on sticky nav either, and google search drove me right here), I made a fiddle with working case.

[gmarinelli]

Thank you very much, Alex! It still relevant in 2019.
Just a tip for someone who may be facing the same issue as me: Don’t use overflow hidden or your dropdown menu won’t work.

[brightmood]

Hi, can anyone look at this page https://skywell.software/virtual-reality-development/
I need to add it to a menu, but as the previous user, it is adding item horizontally, and I need to make a drop-down from ar-vr page in the menu

[cssblogger]

Don’t use overflow hidden or your dropdown menu won’t work

[Author]

Posts