- This topic is empty.
-
AuthorPosts
-
August 29, 2013 at 11:10 pm #148547
raman2572
ParticipantI 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; }
August 30, 2013 at 2:17 am #148559Paulie_D
MemberYour
#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
.August 30, 2013 at 2:32 am #148563raman2572
ParticipantThanks @pauli_d for reply.
But it’s still not workingcheck here http://codepen.io/raman2572/pen/AGcJL
August 30, 2013 at 5:48 am #148579Paulie_D
MemberI 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.
August 30, 2013 at 6:38 am #148585lrelia
ParticipantHope will help.http://codepen.io/lrelia/pen/HeLts I use ‘float:left’ instead of ‘display:inline’
August 30, 2013 at 6:40 am #148587Paulie_D
MemberActually, I prefer
display:inline-block
to float but that’s just me.However, my previous comment still applies.
August 30, 2013 at 6:43 am #148588Paulie_D
MemberHere’s one I keep around for reference you might be able to adapt.
http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294
August 30, 2013 at 6:46 am #148589September 1, 2013 at 11:18 pm #148764raman2572
ParticipantThanks Irelia but whenever I hover on parent item, menu breaks down
September 2, 2013 at 3:23 am #148771Paulie_D
MemberWhy 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.
Did you look at the menu I provided? It should be simple enough to adapt.
http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294
December 21, 2018 at 4:58 am #280442Alex Naidovich
ParticipantIf 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.
January 16, 2019 at 4:04 am #281464gmarinelli
ParticipantThank 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.July 9, 2019 at 6:21 am #292664brightmood
ParticipantHi, 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 menuJuly 26, 2019 at 2:34 am #293418cssblogger
ParticipantDon’t use overflow hidden or your dropdown menu won’t work
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.