Building A 100% CSS Menu: Part 1

[syco1986]

This tut does not work for me when i get to the ul#nav li it doesnt look how yours does mine is like its all one ul list i cant get the About 1 2 3 etc onto the next line.

[zeroke008]

Thanks for this tutorial it realy was a good help :)

[shisodemahesh824]

realy nice and Undersatable........thank you

[wilfredogr]

Cool video, thank you.

[yomexboy]

still not doing it, but its not the coding, its the browser... IE siply doesn't wana contribute... but every other browser works fine with it. regardless, i've decided to take off the drop downs and create a more simple website.

thank you for your help tho!

[louie540x]

@yomexboy

No problem. It was the browser for me too. My drop down menu wasn't staying on top in IE7 until I put that code in.

[yomexboy]

Awesome got my menu, problem is, i have another div right below it. and for some reason the drop downs from my drop down menu fall behind the second div, and i cannot see them. how can i fix this?

[louie540x]

@yomexboy

I had a similar problem recently where it fell behind a flash slide show. Try this:

.INSERTNAME { position: relative; width: INSERTWIDTHpx; z-index:999;

}

[shakaama]

@louie540x what is this code insertwidthpx????

I didn't have a problem, just curious.

[louie540x]

@shakaama

The width of your menu bar.

[shakaama]

@louie540x no i was asking where you got the code from.

[louie540x]

@shakaama

Someone on sitepoint dotcom helped me

[sproket888]

How about a click menu? My users hate mouse-over menus.

[tomknudsen]

I love your way of teaching, hope you do many more

[ChrisSinclair195]

I found using HTML it doesn't work without a DOCTYPE declared. Then it works fine :)

[gomm2749]

i actually love you, im not a web designer but it was part of my course at uni, i hated it until i saw your video...genius!

[molepc]

This is what I was looking for. Great video. Many thanks

[988buddylove]

Thanks for the video great tutorilal!

[cyberthug7]

thanks very much for the vid .... but can u put the files you worked at ( source code )

Thank

[DanielAttila]

Very useful tutorial. Way more clear than some of the others.

[IGOTTHESHAKESBAD]

that mozilla css thing is awesome.

is there one for opera ?

[IIOdInll]

when ur keys make that "click" and i tihnk its ur mouse too its annoying .....anyway nice i used that for my project thanx

[hampsters11]

Quick hex tutorial

000000 black

FFFFFF white

FF0000 red

00ff00 green

0000FF blue

333333 grey

FFFF00 yellow

FF00FF purple

00FFFF maroon I think

[dagger86]

This must be about the simplest implementation of a menu. I like it. ;o)

[shakaama]

@dagger86 did you get it to work?

[bolgrats]

Thanks SO much! Took bits and peices from your vid and I FINALY got my menu the way i wanted it. =)

[zolux669]

The video is very Good ! but the quality is down :s

[nokiams]

Talented !

[yan2292008]

Thank you so much "detacheddesigns"

love from India!!!

[antimutesounds]

Would it be possible to post the css and html in a file so it could be downloaded?

[JustaFreak15]

This is just what I've been looking for!

I tried to follow with you and change what I've had to similarize what you have... but it didnt work.

I think I'll create a new page tomorrow to follow you, and hopefully that will help me figure out where I went wrong.

Otherwise, great tutorial, I understood it (except for one part somewhere, because something didn't go right).

(You never explained why we needed positioning:relative, over another position factor.)

Nice Job!

[JustaFreak15]

When I try to do the

ul#nav li:hover

{

background-color:#------;

}

Nothing happens... Nothing changes when I hover, but I am using IE, would that, if anything, have something to do with it?

[JustaFreak15]

Nor did the

ul#nav li a

{

background-color:red;

}

work... something that simple wouldnt even work...

CSS disagrees with me..

[JustaFreak15]

Well, on the

ul#nav li a {background-color:red}

i had a typo... so... i feel stupid, but the hover still won't work..

[JustaFreak15]

Well, the biggest part wont work..

the

ul#nav li:hover ul

{

display:inline;

}

wont work.....!

I think something is screwed up with my li:hover... Any help??

[shakaama]

@JustaFreak15 did you check different browsers? some browsers don't support some things. then you have to go back and see what they do support.

[JustaFreak15]

Well, I'm gonna take a break for now.....

[JustaFreak15]

actually, while I'm at it, I have another perplexing simple thing yet a problem...

The border right on the li's carries over into the "dropdown" part, therefore the "dropdown" li's have 2 right borders, and the .noborder ones still have a right border...

[moonshiry]

u memorized black color in #292929??? wow i can never remember the numbers. i just type in color:black

[Passname13579]

me too.

But the hexcode for black id: #000000

the color: #292929 is just a grey thing;-D

[xlostzer0]

your typing is SICK

[TCoryLewis]

at about 3:35 into it you mention that you'll tell us why you selected 'relative' as the position later...but I missed it or it was forgotten. Please explain the relative aspect. Thanks

[cswift49]

Too fast? Use the pause button.

Too hard to read? Cntl-mouse wheel to zoom in or out (at least on Safari and FF it works beautifully, don't know about IE)

Done.

[tiger2380]

Great Tutorial. Also, if you click on HQ you will be able to see the text.

[schwabino]

horrible tutorial Jeff, you cant see anything, and your going way to fast, you need to take in effect there is a reason why people are viewing a tutorial, - BECAUSE THEY DON'T KNOW HOW TO DO IT! you should try doing something else.

[MrFunzt]

Conterstrike source menu With esl-setti

add me in steam luxuzboy

[neil1337]

can't read it.

[rockercya]

cant see the css coding u r typing

[notentirelynecessary]

Great tutorial, excellent topic, (I just subscribed to you) but like the others, I can't read the css code you're typing. This really detracts from the experience.

Any chance you could post the .css file somewhere we could download it?

It'd be much appreciated.

Thanks

[adityaverma23]

hey nice tutorial but i cannot see the text!!

[adityaverma23]

hey nice tutorial but i can't see your actions!!!

too small font!!!!!!

you should use camtasia studio or camstudio to record yourscreen!!!!

this is a poor quality video~~

[nilabjo2008]

i cant see what r u writing

[troysheppard8]

looks really useful...but can't see a thing!!!

[Celldesigns]

me too...I wish he had a higher quality on vimeo or something

[ripl0005]

this does work

[godale44]

ul#nav {text-decoration:none;list-sty­le:none;}

ul#nav li ul {display:none;margin:0px;paddi­ng:0px;}

ul#nav li:hover ul {display:inline;}

ul#nav li {float:left;width:100px;}

[planiolro]

Awesome video, but for beginners like me is important to see what are you typing for a better understanding of what are you doing! Is there any way to get the CSS(visible one) for this tutorial?

[prince4878]

dont work with ie6

[SpamBanjo]

It hurts my face when you click your mouse.

Add audio later :(

[Petterss22]

You are simply the best!

[layaab10]

It is a great!

I kindly ask u if u have any idea how to display PDF file on a form visual basic 2008.