FORUMS: list search recent posts

CSS drop down menu help

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Sharon Knight
CSS drop down menu help
on Jan 28, 2010 at 1:59:59 am

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 (http://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)



Return to posts index

Sharon Knight
Re: CSS drop down menu help
on Jan 28, 2010 at 2:13:00 am

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 Link

Indents means it's nested, and yes, all tags are closed properly.

I hope this helps, cause damn.


Return to posts index

Fernando Mol
Re: CSS drop down menu help
on Jan 28, 2010 at 2:23:07 am

-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.


Return to posts index


Sharon Knight
Re: CSS drop down menu help
on Jan 29, 2010 at 1:36:20 am

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


Return to posts index

Fernando Mol
Re: CSS drop down menu help
on Jan 29, 2010 at 2:47:38 am

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.


Return to posts index



Fernando Mol
Re: CSS drop down menu help
on Jan 29, 2010 at 5:05:54 am

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.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]