Well this tutorial we are going to make Fancy CSS Layouts! One of the best menus we will make is a Drop Down Menu!! It works in every browser! No javascript required! There are a total of 4 menus i will show you and teach you!

Here is a list of what we are going to be creating:
Drop Down Menu
Fancy Border Menu
Bottom Border Menu
Sliding Menu

Blank HTML Sheet we will be using the for the 3 out of 4 menus:



Here is what we are going to make: Click here!

First lets start with a cool border effect menu!

This effect is fairly simple, but most people don't know you can add alot of colors to borders!

Put this code in the body:



Thats nothing big on it... Just some link tags and a div! You should know what those mean. Remember change the # to your links.

Time for the styling!



Lets break it down, as you can see the selector has more than 1 value. This is useful for links like we are doing with this code. Well the it aligns the text to the center to look good, and has no text-decorations so no underlines or anything.

Has a text color of Black and the display: block; is very helpful. what this does it just like a paragraph. Well you see a width of 7em, em is just another property for width like px. So that makes it around 100pixels or so. maybe somewhere from 20-30 pixels high. and a border is invisible since the background is white, now if the background wasn't white you would see it.

Time for the final css part:

This is when we hover over it and changes color and the border looks awesome!



Well has a text color of white! and a background of light blue. Now for the interesting part, you see the border-colors have 2 of them what this does is adds a blue border on the top and bottom (#3798cb) then the (#FFFFFF) is on the sides. All the borders equal one square, but it doesnt seem like that. now if you wanted you could keep adding colors! You can have only up to 4 colors though.

Menu # 1 done!

Final code for menu 1:





Here is what we are going to make: Click here

This will be menu # 2! Well I really don't know what to call it, so why don't I show you what it looks like!

I think its pretty cool! Lets get started! Use the blank html sheet from the beginning.

This one requires a bit more CSS Code.

Okay before we work on the css lets have a look at the code that display's it



You should know what this means....

Time for CSS woohoo!



Alright first we start off with margin of 0 and padding of 0, this just makes sure nothing moves anywhere, change it if you will. Well we have a border on the bottom, this makes it looks good once we finish it! It has a width of 5 pixels and a light bluish color.



Well that code makes it in a straight line for the li's and has no padding on it.

Time for code # 3



well as you can see this has alot of selectors... well this has a EM, and a:link, and a:visited selectors.

All of the code below the selector have the same exact effect for each of them. they have a font of georgia, times new roman, and serif. Font size of 1.5em which in pixels is about 24 or so. Color of lighter green :), if you havent noticed the colors in these menus all are Pixel2Life colors!

Has no text-decoration so no ugly underlines.and some padding of 0 on top and bottom, and a padding of 2 on the left and right sides. this just spaces out the text more. border of white which you can't see unless your background isn't white. and it has no border on the bottom to stop it from showing up on the bottom blue line.

Final code!



alright this is the hover on the menu links, this is what makes it look better! Well we have a new color! this is the color of the text when we hover over it, its a light orange. Just imagine the light green stated above as orange :). alright now the borders!
Well we have a border on the top of 2 pixels that is blue, and same goes for the other border that's defined. The bottom border has nothing since there is something down there already.

Woohoo we are done!

Alright we finished that menu, save it and load it up to see how it looks or click here to see it!

Final Code:



Here is what we are going to make: Click Here

Time for menu # 3! This is a sliding down menu kinda. This one is my favourite!

This one require 2 CSS Codes!

First let's start with the body! You know where this code goes:



Pretty basic stuff, div's and href's!

Time for the css code!



That's the biggest code in the whole thing. Well it aligns the text in the center, background of a bluem and the display block just puts em going down. no ugly decorations since we have text-decoration of none. and the width of 5.5em isn't to big, maybe 50-75 pixels in width. border of 1 px thats black. and the text color is black!



oooo looky what we have here, a cursor css code, not many people use this! with the pointer for the value it shows a little hand with a finger pointing up! and padding on the top of 0.8, adds maybe 15pixels to it. and the background changes to darker green. then the text changes to white!

Final Code:



Here is what we are going to make: Drop Down Menu Preview CLICK!

Time for the final menu! The DROP DOWN MENU! That works in every browser! thats right every browser NO JAVASCRIPT REQUIRED!

Lets get started! We need this new blank sheet since we change the doctype in this one to make it work!



As you can see many things are changed in this... first the doctype! well it has [ ]
added to it. Using the XHTML doctype we are allowed to extend it to allow the drop down to work in other browsers that wouldn't render it correctly. this just extends the A element to allow tables. Yes there are a little code of tables, just so IE can make it look correct.

Now if you noticed there are 2 seperate style type's for css, The first one is for all the other browsers and the other is just for IE. Yes IE has it's own style thing >.
Let's get started shall we :)

First the body codes! This code is ONLY for IE, this code will not show up in the other browsers:


Well yes there are the tables! I told you its nothing much! As you can see the links have a class to them! this just makes it so we can add css coding to style it and make it better. Nothing you shouldnt under stand in their. Remember this code WILL NOT display in any other browser other than IE

Add this code right below it:



This is for every other browser! You should know what that stuff does/is.

Time for the css code! These CSS codes coming go in the first style thing:

Thats where they go!

First code and Second code:



Well since they are short I gave you them both! it has a text color of white and a font size of 1% in the body code and the display none doesn't do anything, dont worry about it.

Here comes a really big code ;)



Alright I told you it was big! Has a text color of black, width of 90 pixels and a height of 18 pixels and display block makes them next to each other and a background of green, and a border of 1 pixel and it's solid black, and the margin-right pushes the 2 boxes off of each other. and the text is align in the center and its floated left, and has no text-decoration for the links, and a font family of tahoma, verdana, arial, and sans-serif. Font size of 10 pixels which isn't that high. and a line height of 18pixels which just adds height to the boxes. and for overflow: hidden, you don't see this code every day... well every box in this drop down menu is showing. but with overflow hidden it only shows the top one.

whew done with that one!



This is where the drop down comes in! well the height is auto, automatically does the height. and the cursor has a pointer for it which is a hand pointing up! and a text color of white! and the background of green.

Final 2 codes for this set of CSS codes:



These codes style the menus that drop down in the menu. Well it has a display of block which justs puts them right after eachother going down. and a width of 89 pixels and height of 18pixels. border of black, and no text decorations and the text color is black. Has a background of light blue.

Time for the hover! well pretty simple, when you hover over the link the background changes to a really light blue!

We are done with the CSS Code that will work in every browser besides IE! Still 1 more set to do!

Alright the following CSS Code goes in:


Lets get started on the last set of css codes!


Not much here as you see, the container has no display and the menu has a display of block which just puts them straight up and down!



Pretty big code nothing to complex at all! text color of black width of 90 pixels and height of 18 pixels and a display of black. background of dark green. border of a solid 1 pixel black. Margin-right of 1 px to space the 2 menus out. text is aligned to the center, and the menus are floated left. text decoration of none, so no ugly underlines. font family of tahoma, verdana, arial, sans-serif. font size of 10 pixels not to high nor to big! line height of 18 pixels which is just hope big the little box is. and the overflow for the other menus in it are hidden.

time for the 2 hovers:


Let's see the first one has a color of white, background of green, then the overflow is visible which shows the other menus! then the other one has a display of block which you should know what it does, has a background of a light blue. and a border collapse.

Final 2 CSS CODES!



Alright these are just 3 link css codes for the inside of the drop down menu! First the top css code, has a display of the value block, width of 88 pixels and height of 18 pixels and border on the bottom of 1 pixel that is black, and a text decoration of none and text color of black. Font family of tahoma, verdana, arial, sans-serif. font-size of 10 pixels and text is aligned to the middle. and for the final code has a background of blue.

Finished!!!!!!!!

Heres the whole code:



Well this is my second tutorial ever on twodded! I hope you all like it on how to create snazzy menus! Hopefully this will answer everyone questions on how to make a drop down menu in CSS!

Well heres the whole folder of all the menus created: Click here

Here is a download link for every single menu: Click here

Good day everyone! Hope you have enjoyed this!

-Chris Fogarty