-
CSS drop down menu help
Hi All –
I am trying to create a horizontal drop down menu bar using CSS. It’s my first one using CSS. I used the tutorial on the Tanfa site (https://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html).
It was going great until my client asked me if I could make the top level links as well (as opposed to just headings)- which I thought would be a no-brainer, but now my sub-menus don’t appear when I hover. They are hiding just fine. I have checked my CSS against the Tanfa site’s and it seems to me it should work – why would it hide okay but not reveal?
Please someone help if you can – I have tried everything I can think of and my eyes are bugging out.
Thanks in advance!
Here is my code:
HTML (first item only)
-
6 Replies
-
Oh sheesh and now the HTML i posted to show you is displaying not as code but as the end result. Argh.
Is there a way I can show you my HTML code, or is this good enough?
Sorry for the hassle.
Basically it’s
Unordered List
List Item Link Header2
Unordered List Link
Unordered List LinkIndents means it’s nested, and yes, all tags are closed properly.
I hope this helps, cause damn.
-
-Paste your code
-Highlight it
-Press the CODE button on the post window
-Post*Always share a link to your site and rate the posts. This is a free service for you and for us.
-
Thanks Fernando!
Okay so here is the HTML code:
<div id="menu"><ul>
<li><a href="about.html"><h2>About</h2></a></li>
<ul>
<li><a href="who_we_are.html">Who We Are</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</ul>And here is the CSS:
#menu {
width:100%
background: #eee;
float:right;
position: relative;
top: 147px;}
#menu ul {
list-style: none;
padding:0;
width:4.75em;
float: left;
}#menu a, #menu h2 {
font: bold 11px/16px Arial, Helvetica, sans-serif;
margin: 0;
padding: 2px 10px;
display: block;
}#menu h2 {
color: #FFCC66;
text-transform: uppercase;
text-align: center;
font-weight: bold;
border-top: 2px groove #990000;
border-bottom: 2px groove #990000;
}#menu a {
color: #FFCC66;
background: #660000;
text-decoration:none;
}#menu a:hover {
color: #a00;
background: #E8B973;
}#menu ul ul {
position: absolute;
z-index: 500;
}div#menu ul ul {
display: none;
}div#menu ul li:hover ul
{display: block;}div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}.clearFloat {
clear: left;
}Any idea why my drop downs won’t reveal? They hide just fine. I am not developing w/ IE.
I welcome any advice!
Thx! Sharon
-
Where are the h2 elements? Did you erase them?
*Always share a link to your site and rate the posts. This is a free service for you and for us.
-
They are still there, in the second line of code. They are contained within the tag as I wanted them to be a link but to be able to apply different formatting to them. They are wrapping the word “About”.
-
I can see some differences in the tutorial and your code.
I found in the HTML they start the ul, then open a li and an h2
then they close the h2, open a new ul, do their mess and finally close the first li just before they close the first ul.
I am making sense?
They are playing with some hacks I’m not familiar with. I suggest double checking again the code, make it functional and then add the link inside the h2. Maybe adding the link is braking some rule names. That could be the issue, but is hard to say without testing every step starting from a working code.
*Always share a link to your site and rate the posts. This is a free service for you and for us.
Reply to this Discussion! Login or Sign Up