CSS dropdown menu failure, Css dropdown menu fails to appear; what am i doing wrong Options

[n1618]

Hey guys im new on this forum and im busy making my first real website. I was working on the css nav/menu and tried to implement a dropdown(vertical) menu under the horizontal nav. I searched the web for what i'm doing wrong in my code, but couldnt find out. If anyone could tell me I would really appreciate it (it's probably easy for most of you). This is the code:

Html part:

<!-- horizontal navigation -->
<div id="nav1">
<ul>

<li id="current" style="border: medium none ;">
<a href="#" shape="rect">Home</a>
</li>
<li>
<a href="#" shape="rect">Bibliotheek</a>

<ul>
<li><a>Informatie</a></li>
<li><a>Documentaires</a></li>
</ul>

</li>
<li>
<a href="#" shape="rect">Voeding & Verzorging</a>
</li>
<li>
<a href="#" shape="rect">Forum</a>
</li>
<li>
<a href="#" shape="rect">Over ons</a>
</li>

</ul>
</div>
<!-- end horizontal navigation -->


CSS part:


#nav1 {
height:40px;
margin:0 auto ;
text-align:center;
}

#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:40px;

font-size:13px;
font-family:Trebuchet MS,sans-serif;
}

#nav1 ul li {
display:block;

float:left;
margin:0;
padding:0;
background:transparent url('images/css/hmenu.jpg') repeat-x top left;

}

#nav1 li ul {
display:none;
padding:0px 50px;
line-height:40px;
font-weight:bold;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;

}

#nav1 ul li a {
display:block;
float:left;
color:#222222;
text-decoration:none;
padding:0px 50px ;
line-height:40px;
font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
display: block;
color:#ffffff;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;

}

#nav1 li:hover {

}

#nav1 li:hover a { background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left; }

li:hover a {
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}


Greetings Nick

[pandy]

Well, there are no sub links in the HTML so what is supposed to happen?

Also, the shape attribute is pointless unless you use an image map and rect is the the default value anyway.

[n1618]

you mean sublink as in the links of the actual list and sub list? I will fill those in later, im just trying to finish the 'skeleton' of my website so to speak. To see if the css would work i put in the <a>text already. but it didnt work (as in; the sub list won't appear when i hover over the nav'button')

I'll see if i can remove the shape attribute.

This post has been edited by n1618: Aug 3 2012, 08:15 PM

[pandy]

My bad. I didn't notice the submenu.

Is it this that's supposed to show the sub menu?

CODE

#nav1 ul li a:hover, #nav1 li#current a {
display: block;
...

It won't work because the hidden A can't be hovered. You need to put :hover on something that's visible and contains what should be made visible. This won't be pretty but that's another matter.

CODE

#nav1 li:hover ul    { display: block }

[n1618]

oh i see thx. Ok im getting somewhere, problem is now the submenu wont go vertical under the specific navbutton, instead it just pushes the other mainbuttons to the right and thus below. Isnt it suposed to appear vertically (under the hovered button) by default?

the background images i used (hmenu,hmenu-sel.jpg) fill the button with a 'bended' look in the form of a white horizontal stripe in the middle of the green button, sort of like a low tech lighting effect. Would you consider that pretty or were u referring to something more specific?

This post has been edited by n1618: Aug 3 2012, 09:52 PM

[Frederiek]

Have a look here: http://www.maxdesign.com.au/css/

[n1618]

thanks thats a nice website and I bookmarked it. But something specific is making my navigation bar submenu act weird, and im not skilled enough yet to see what it is.

1 submenu <ul> <li> now appears next to the 2nd main navbutton and the other submenu <li> appears under the 2nd navbutton. I have no idea what is causing this.

[Frederiek]

Can you post the URL (address) of your page? Then we can see any changes you made and do tests.

[n1618]

i didn't put it online yet cause its not finished. But the full code of the navbar i posted, the error should be somewhere in there i think.

But, i made screenshots showing the problem, hope its clear enough.

This post has been edited by n1618: Aug 5 2012, 11:11 AM

[Frederiek]

Screenshots don't tell us how you coded it.
You could upload a test page somewhere, with just the markup of the menu and the CSS for that. Or post them inside a post here (by copy/paste or attachment).

[n1618]

i thought i posted the css and html code in my first post in this topic. I believe thats what your requesting of me? I could be wrong.

[Frederiek]

Oops, sorry, indeed.

But you said you made changes. Besides, you use background-images, that I don't have and the submenu doesn't work at all, even if I change the images to background-colors.

Anyway, have a look here: http://css.maxdesign.com.au/listamatic2/horizontal04.htm . The first item has a dropdown menu. And see how it is coded in the CSS.

[edit] PS: Here's another sample from Eric Meyer: http://meyerweb.com/eric/css/edge/menus/demo.html

This post has been edited by Frederiek: Aug 6 2012, 05:10 AM

[n1618]

Ok, im a little bit further now. The sublnav-list appears on the right spot now, the sublist just will not stack vertically yet.

Need to figure out what is the code for making them appear vertically.

[pandy]

Sceeen caps still don't tell us how you did it.

[n1618]

html:

<!-- horizontal navigation -->
<div id="nav1">
<ul>
<li id="current" style="border: medium none ;">
<a href="#" shape="rect">Home</a>
</li>
<li>
<a href="#" shape="rect">Bibliotheek</a>
<ul>
<li><a>Informatie</a></li>
<li><a>Documentaires</a></li>
</ul>
</li>
<li>
<a href="#" shape="rect">Voeding & Verzorging</a>
</li>
<li>
<a href="#" shape="rect">Forum</a>
</li>
<li>
<a href="#" shape="rect">Over ons</a>
</li>
</ul>
</div>



css:

#nav1 {
height:40px;
margin:0 auto ;
text-align:center;
}

#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:40px;

font-size:13px;
font-family:Trebuchet MS,sans-serif;
}


#nav1 ul li {
display:block;

float:left;
margin:0;
padding:0;
background:transparent url('images/css/hmenu.jpg') repeat-x top left;

}

#nav1 li ul {
display:none;
position:absolute;
height:auto;

text-align:left;
padding:0px 50px;
line-height:40px;
font-weight:bold;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
clear:left;



}


#nav1 ul li a {
display:block;
float:none;
color:#222222;
text-decoration:none;
padding:0px 50px ;
line-height:40px;
font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
display: block;
color:#ffffff;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;



}

#nav1 li:hover ul { display: block;

}



#nav1 li:hover a { background:transparent url('images/css/hmenu-sel.jpg')

repeat-x top left; }

[pandy]

CODE

#nav1 ul li {
display:block;
float:left;
...
}

That also affects the LIs in the nested list.

[n1618]

i was just trying to make #nav 2 id for the sub before reading this. I realised the lists were conflicting. Then i read your post and realised to target the sublist i needed to put in

CODE

'#nav 1 ul ul li {}'

So i got it to work now. Thanks for the help guys

If u want me to show u the end result for possible feedback i'll make a screen of my working css menu, lol

ps. Is it true some browsers don't handle pure css hover menu's ?

[pandy]

Yes, it's true.

[Frederiek]

Which ones?
Probably mostly older browsers that don't support :hover on any other elements but A tags.