Home
1
Submenu using CSS Wed Jan 05, 2011 3:09 am
Guest
Guest
| Submenu using CSSCreating a submenu using CSS |
Hello members, Today i am going to teach you how to create a submenu using only CSS,step by step. Tools you may need: + Notepad/WYSIWYG editor/Dreamweaver/Editpad Lite/Espresso(or just an HTML editor  +Basic HTML Knowlege +Basic CSS Knowlege(since i am gonna teach you how to do the rest )+A computer  Alright enough fun lets get working. ______________________________ Lets start with our HTML first. We are going to create an unordered list (aka <ul>) for the whole thing,and the <span> tags to do the submenu job(we could use a mixture of onother unordered list into a list(li) but i dont really like that method) We name our unordered list as nav:
Adding some links first:
As you can see,we used the <span> tag to display the submenu and putted it into the list of the 3rd link. Now,lets start styling the navigation using css: I will explain everything into the css code:
You can edit everything and experiment with it,you can also use an image as a background in the navigation by replacing:
Now lets work on the lists:
You can also add hover effects on the links of the nav,by using the selector:
Now lets style the submenu:
you will understand these,explained them in the above codes 2 times  You can also use css3 rounded corners or css3 box shadows to make it look more proffesional : -Rockerman's Box-shadow Tutorial -Rockerman's CSS3 rounded corners tutorial ______ [url="http://rubbish.forumotion.com/h5-nav]Demo[/url] (Changed a little bit) ______ Currently,the nav wont work in IE.Searching for a script though to update it. |
Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Nick on Fri Jan 07, 2011 2:36 am; edited 2 times in total
#eaa500. There where 3 other errors too, here they are. Take a look...
