Well, after lots of searching and researching, I discovered something called a "z-index." It is used to bring things to the forefront and background of your site. It basically helps with layering. Once I found out about it I started playing with it and I figured out how to fix my dilemma and the best part is that it is SUPER EASY!!!
Here is what you do: Click to edit the widget where you entered your html code for your dropdown menu. Find the following code:
#navbar li:hover ul {
display: block;
position: absolute;
background: #00cc00; {You may have a different color code here.}
margin: 0;
padding: 0; }
Once you have found this portion of the code, you will need to add one small part, which is below in red.
#navbar li:hover ul {
display: block;
position: absolute;
z-index:1000;
background: #00cc00; {You may have a different color code here.}
margin: 0;
padding: 0; }
Once you add the part in red, save and close the widget and you are all done. (You may be able to achieve the same results with a lower z-index, if needed.)
Now, that is what I am talking about...an easy fix for a "seemingly" big problem! :-)
mama jenn
This post may contain affiliate links. Read my full disclosure policy here.
Welcome to my main blog!
Wow - that is cool. Now I have to see how to make the menu in the first place:)
ReplyDeleteOkay, the side column is way too cool!
ReplyDeletemy brain is now boggled, but like your set up. I did really LOVE the look of the brown background kind of like cork though.
ReplyDeleteThanks! I think this is similar to my problem. My drop down disappears behind the post. I've tried messing with the z-index like you did but it's not fixing my problem. Did you come across anything like this in your research?
ReplyDeleteThis totally fixed my problem. Thank you so much!
ReplyDeleteAmanda, Maybe try increasing the z-index #. Initially I tried 100 and it didn't work. Next I tried 1000 and that did the trick. Perhaps trying a larger #. Hope that helps!!! :-)
ReplyDeleteThank you :) It helped me a lot.
ReplyDeleteI was referenced from the bog Confessions of a Homeschooler, which helped me making the dropdowns.
http://confessionsofahomeschooler.blogspot.com/2010/03/horizontal-drop-down-menunavigation-in.html
Thanks so much for this tutorial, I was ready to pull my hair out, I could not figure out why my drop down menu was hiding...Easy fix!
ReplyDeleteTOtally worked on my computer...but my husband went on his and the drop-down menu didn't work there. Thoughts?
ReplyDeletewww.lil-LIZ-bits.com
Working on the color scheme too...can't seem to decide. Hmmmm....
I am up to z10000 and still have a hiding drop down. HELP?!
ReplyDeleteOH thanks soooo much, you just solved my problem :)) i was so lucky to find your amazing blog from another great blog Confessions of a Homeschooler! i'll definitely keep on reading this :)
ReplyDelete-outi
http://pienikuvakirja.blogspot.com/
Mrs T~
ReplyDeleteUnfortunately I don't have another solution for you. I'm sorry!
Thanks! Now if only I could figure out how to get the widget box to look right on my blog. Any special hints??? :)
ReplyDeleteA Homemaker's Heart!
ReplyDeleteYour blog is SO cute! As for the widget box, I totally just played around with mine. So, I probably would not be of much help. However, I think I am going to take it off. I don't like how it takes extra time to load on the page...
Thank you so much for sharing! I searched endlessly on many sites trying to figure out this problem. I can't believe it was that simple.
ReplyDelete