...

View Full Version : Dropdown menu



Bv202
04-02-2011, 03:19 PM
Hi,

I've been asked to create a dropdown menu (without using Javascript or other scriptlanguages, only HTML and CSS).

I've looked at a few examples and tutorials, but I still can't get it to work correctly.

This is my HTML code for the menu:

<div id="menu">
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li>Dropdown<ul>
<li>Dropdownitem #1</li>
<li>Dropdown item #2</li>
</ul>
</li>
<li><a href="page.html">page</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

This is my CSS code:

#menu
{
color: #76859B;
}

#menu li
{
list-style-type: none;
display: inline;
padding-left: 100px;
}

#menu ul
{
text-align: center;
margin-left: 0;
padding: 10px 0 10px 0;
border-bottom: solid;
border-color: #76859B;
border-width: 2px;
margin: 0 auto;
}

#menu li:first-child
{
padding-left: 0px;
}

#nav ul
{
position: absolute;
left: -1000px;
}

#nav li:hover ul
{
left: auto;
}

I believe I'm doing it completely wrong. This is the correct display:
http://img130.imageshack.us/img130/3017/dropdowny.png

Note that I don't want a horizontal dropdown menu, but a vertical one. So if my mouse is hovered on the word "dropdown", a vertical dropdown menu should appear.

How can I do this correctly?

Tyvm

abduraooft
04-02-2011, 03:47 PM
Have a look at http://htmldog.com/articles/suckerfish/dropdowns/

PS: Got some divitis (http://csscreator.com/divitis)?

Bv202
04-02-2011, 03:49 PM
Have a look at http://htmldog.com/articles/suckerfish/dropdowns/

PS: Got some divitis (http://csscreator.com/divitis)?

Thanks, I'll have a look. But I've followed a few of these tutorials already:confused:

Also, there is only one div used in my example:p

abduraooft
04-02-2011, 03:55 PM
Thanks, I'll have a look. But I've followed a few of these tutorials already Update the thread, if you find it too hard.

Bv202
04-02-2011, 04:23 PM
I got this now (and removed the id "nav" from the HTML):



#menu, #menu ul{
list-style: none;
text-align: center;
}

#menu ul
{
margin-left: 0;
padding: 10px 0 10px 0;
border-bottom: solid;
border-color: #76859B;
border-width: 2px;
margin: 0 auto;
}

#menu a {
display: block;
text-decoration: none;
font-weight: bold;
color: #76859B;
}

#menu li {
float: left;
width: 10em;
padding-left: 100px;
}


#menu li ul {
position: absolute;
width: 10em;
left: -1000px;
}

#menu li:first-child
{
padding-left: 0px;
}

#menu li ul li
{
padding-left: 0px;
}

#menu li:hover ul {
left: auto;
}

But now my bottom border isn't at the bottom anymore but at the middle of the text. And the menu is not centered anymore...

abduraooft
04-02-2011, 04:45 PM
But now my bottom border isn't at the bottom anymore but at the middle of the text.
Try
#menu ul
{
margin-left: 0;
/*padding: 10px 0 10px 0;*/
overflow:auto;
border-bottom: solid;
border-color: #76859B;
border-width: 2px;
margin: 0 auto;
}

Bv202
04-02-2011, 04:56 PM
Thank you, I'm getting close :)

This is my current code:

#menu, #menu ul{
list-style: none;
text-align: center;
}

#menu ul
{
margin-left: 0;
overflow:auto;
border-bottom: solid;
border-color: #76859B;
border-width: 2px;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 10px;
}

#menu a {
display: block;
text-decoration: none;
font-weight: bold;
color: #76859B;
}

#menu li {
float: left;
width: 10em;
padding-left: 100px;
}


#menu li ul {
position: absolute;
width: 150px;
left: -1000px;
border: none;
background-color: blue;
}

#menu li:first-child
{
padding-left: 0px;
}

#menu li ul li
{
padding-left: 0px;
}

#menu li:hover ul {
left: auto;
}

One problem left: the dropdown menu is not centered.

abduraooft
04-02-2011, 05:04 PM
*{
margin:0;padding:0;
}
#menu{
width:40em;
margin:0 auto;
}
#menu li {
float: left;
width: 10em;
/*padding-left: 100px;*/
}

Now, if you need that border to stretch to full width, you'd need top bring back that <div> :)

Bv202
04-02-2011, 05:09 PM
That's not working, but is only breaking the whole menu...

EDIT:
Had to revert the code to the first version. Whatever I try, this is NOT working...

abduraooft
04-02-2011, 05:21 PM
<div id="wrapper">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li>Dropdown<ul>
<li>Dropdownitem #1</li>
<li>Dropdown item #2</li>
</ul>
</li>
<li><a href="page.html">page</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

*{
margin:0;padding:0;
}
#wrapper{
border-bottom: 2px solid #76859B;
}
#menu{
width:40em;
margin:0 auto;
overflow:auto;
}
#menu, #menu li{
list-style: none;
}

}

#menu a {
display: block;
text-decoration: none;
font-weight: bold;
color: #76859B;
}

#menu li {
float: left;
width: 10em;
/*padding-left: 100px;*/
}


#menu li ul {
position: absolute;
width: 10em;
left: -1000px;
}

#menu li:first-child
{
padding-left: 0px;
}

#menu li ul li
{
padding-left: 0px;
}

#menu li:hover ul {
left: auto;
}

Bv202
04-02-2011, 05:26 PM
Thanks, but I got that far already...

It's the dropdown which is not centered:
http://img846.imageshack.us/img846/9350/dropdown.png

Excavator
04-02-2011, 06:07 PM
Hello Bv202,
I've never built a dropdown that positions the dropped ul off the page when it's not in use, I'll have to play with that a while. I don't much like hovering on an li so I added a link there. I also added some colors just so you could see the size of the li. When you add content you may need some z-index to make sure the dropped ul stays on top...

Give this a try -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 100px 0;
background: #fc6;
}
#wrapper {
height: 30px;
border-bottom: 2px solid #76859B;
}
ul#menu {
width: 40em;
margin: 0 auto;
padding: 0;
line-height: 30px;
text-align: center;
}
ul#menu li {
width: 10em;
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
background: #c93;
}
ul#menu li a {
text-align: center;
text-decoration: none;
color: #fff;
}
ul#menu li:hover {background: #cc3;}
ul#menu ul {
width: 10em;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 30px;
visibility: hidden;
}
ul#menu li:hover ul {visibility: visible;}
ul#menu a {
display: block;
text-decoration: none;
font-weight: bold;
color: #76859B;
}
ul#menu a:hover {color: #666666;}
</style>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="#">Dropdown</a>
<ul>
<li>Dropdownitem #1</li>
<li>Dropdown item #2</li>
</ul>
</li>
<li><a href="page.html">page</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!--end wrapper--></div>
</body>
</html>

Bv202
04-02-2011, 06:46 PM
Thank you very much, that's exactly what I'm looking for!

I'll try a few things out, thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum