Making A CSS horizontal, drop down menu

Powderhound · #1 (**permalink**) Aug 19th, 2006, 02:33

Hey everyone

I'm wanting to build a CSS horizontal, drop down menu. I had a look around on the net for some tutorials on how to do this and couldn't really find ones that I liked. however, i did find one site that had what I wanted (http://www.sperling.com/examples/menuh/ ) but the menu was far to complicated for me as I am a newbie to making websites.
if anyone know's how to make a menu like this easily, could you please help me?

Ryan Fait · #2 (**permalink**) Aug 19th, 2006, 04:00

This is a better tutorial:

http://alistapart.com/articles/horizdropdowns

Powderhound · #3 (**permalink**) Aug 19th, 2006, 08:05

thanks for that, this one looks good

ukgeoff · #4 (**permalink**) Aug 19th, 2006, 17:05

This one I put together a while back will take you from the ground up in both vertical and horizontal menus.
http://1ontheweb.net/downloads/Creat...enu_system.pdf
Allyou need to sort out then is your visual styling preferences.

Powderhound · #5 (**permalink**) Aug 19th, 2006, 22:05

thanks, that one is good to.

Powderhound · #6 (**permalink**) Aug 19th, 2006, 23:29

thaks ukgeoff, i followed your tutorial, but got confused at the part where you had to follow this link http://www.xs4all.nl/~peterned/csshover.html. I continued on and finished the tuorial. i have the menu uploaded on my site http://www.freewebs.com/powderhound11/ . it does not look like it should and the sub menu doesn't work in IE. If you or some else could help me fix it, it would be greatly appreciated.

This is my html that involves the list

Code: Select all

<html>
<!-- Created on: 5/27/2006 -->
<head>
  <title>Ski Australia</title> 
<link rel="stylesheet" type="text/css" href="Ski Australia - Index CSS.css" alt="none"/>
<!--[if IE]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->  
</head>
<body>
    <div id="pagewrap">
        <div id="banner">
<!-- Insert banner-->
        </div>
        <div id="pagewrap2">
            <div id="navigation">
                <ul class="level1">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#"></a></li>
                    <li class="submenu">Ski Resorts
                        <ul class="level2" id="sub1">
                            <li><a href="Perisher Blue page.html">Perisher Blue</a></li>
                            <li><a href="Thredbo page.html">Thredbo</a></li>
                            <li><a href="Hothan page.html">Hotham</a></li>
                        </ul>
                    </li>
                    <li><a href=mailto:"austin_spm@hotmail.com?subject=Inquires_at_Ski_Australia">Contact us</a></li>
                </ul>
            </div>
                <br>
                <br>
                <br>

and this is my css for the menu

Code: Select all

@charset "windows-1252";

/* CSS */

/* Menu */

#navigation {position: relative;
                font-size: 12px;
                font-family: Verdana, Arial, sans-serif;
                z-index: 1;            
}

#navigation ul {list-style: none;
                    list-image: none;
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    border: 1px solid #000;
                    border-bottom: none;
                    background-color: #C8C8C8;
                    width: 80px;
}

#navigation li {position: relative;
}

#navigation ul ul {position: absolute;
                        display: none;
                        border-bottom: none;
}

#navigation ul.level1 {width: 500px;
                        height: 25px;
} 

#navigation ul.level1 li {position: relative;
                                border-right: 1px solid #000;
                                float: left;
}

#navigation ul.level2 li {border-bottom: 1px solid #000;
}

#navigation li.submenu:hover ul.level2{display: block;
                                            left: 0px;
                                            top: 19px;

}

#navigation ul#sub1 {width: 170px;
}

#navigation li a {display: block;
                    padding: 3px 0 3px 3px;
                    text-decoration: none;
}

#navigation ul.level1 a {width: 77px;
}  

#navigation ul#sub1 a {width: 167px;
}

#navigation li a:hover {color: #FFF;
                            background-color: #00F;
}

#spoiler {position: absolute;
                top: 0;
                left: 88px;
                width: 200px;
                height: 150px;
                background-color: #F00;
}

this is the ieonly.css

Code: Select all

@charset "windows-1252";

body    {behavior: url(csshover.htc);
}

Ryan Fait · #7 (**permalink**) Aug 20th, 2006, 08:39

The reason why it doesn't work in IE may be on my link. Look for the JavaScript section to add the dropdown capabilities in IE.

ukgeoff · #8 (**permalink**) Aug 20th, 2006, 10:31

The reason that the dropdown doesn't work in IE is associated with the link you got confused over.

IE, contrary to the W3C spec, does not support the :hover attribute on anything other than an <a> link.

That link will enable you to get the latest version of the file that is accessed through the ieonly.css file. This file adds that missing functionality to IE.

Get rid of the charset instruction from the ieonly.css file.

The second <li> in your menu has an empty <a> link at the moment.

If you read through the latter part of the tutorial, you will see that I deliberately left an issue or two, such as getting the dropdown menu to stay put, for you to sort out. This was so it reinforces your understanding rather than just copying something verbatum.

What you need to do is in the tutorial, you just have to figure it out.

If you really, really can't sort it, then come back to me.

Powderhound · #9 (**permalink**) Aug 20th, 2006, 21:43

thanks, i will give it a go.

Powderhound · #10 (**permalink**) Aug 21st, 2006, 07:49

I have fixed my menu. Although there is still a problem when veiwing it in IE. go to my website to see what I mean.
http://www.freewebs.com/powderhound11/

ukgeoff · #11 (**permalink**) Aug 21st, 2006, 14:03

Just had a quick look at your code.

Not convinced you stuck to the tutorial!

There is some JavaScript near the top of the file that might be interfering and doesn't appear to be needed so get rid of it.

You have two <ul id='nav'> in your code which is not allowed. Each id can only appear once on any given page.

Give your code a proper DOCTYPE and sort out the validation problems and it will make life a lot easier.

moojoo · #12 (**permalink**) Aug 21st, 2006, 14:14

Just for reference, this is an awesome little .htc file which is designed for IE stuff like this. Works like a charm, although using it in your CSS messes validation.
http://www.xs4all.nl/~peterned/csshover.html

ukgeoff · #13 (**permalink**) Aug 21st, 2006, 14:45

Hi moojoo,

This was all covered in the tutorial I directed him to and if you use it like I suggest, then your main css file will still validate.

Powderhound · #14 (**permalink**) Aug 22nd, 2006, 06:18

Quote:

Originally Posted by ukgeoff

Just had a quick look at your code.

Not convinced you stuck to the tutorial!

There is some JavaScript near the top of the file that might be interfering and doesn't appear to be needed so get rid of it.

You have two <ul id='nav'> in your code which is not allowed. Each id can only appear once on any given page.

Give your code a proper DOCTYPE and sort out the validation problems and it will make life a lot easier.

Yeah I kind of mixed two, tutorials into one. and the JS I got from the other tutorial. I will fix up those <ul id='nav'>, and I know this is probably a stupid question, but I'm a newbie, what is a DOCTYPE? Also, what is a good validator?

Thanks for the help

ukgeoff · #15 (**permalink**) Aug 22nd, 2006, 09:58

A DOCTYPE should be the first line of code on your page. It specifies the version of (x)html being used to code the page.

Use the validation service provided by W3C.
http://validator.w3.org/

They also have a css validator.
http://jigsaw.w3.org/css-validator/

Powderhound · #16 (**permalink**) Aug 22nd, 2006, 10:42

Thanks very much for all the help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Positioning problems with horizontal drop down menu	dreamabstract	Web Page Design	2	Jun 16th, 2008 12:09
Problems making horizontal footer with 2 lines...	MikeTheVike	Web Page Design	6	Jul 13th, 2007 13:06
CSS Horizontal drop-down menu ???	j4mes_bond25	Web Page Design	2	Apr 6th, 2006 16:10
horizontal drop-down menu	da_stimulator	JavaScript Forum	2	Nov 4th, 2004 11:16
Horizontal drop down list	Ranko	Web Page Design	8	Oct 23rd, 2004 10:25

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Making A CSS horizontal, drop down menu