Breaking News
You are here : Home / Web Design / HTML/CSS / Two Level CSS Menu
Two level Css Menu

Two Level CSS Menu

Two level CSS menu is very nice and easy to implement.this is such a great menu which works only with Css. yep! no javascript needed to run it.You can use it as a sub menu in your pages . Two level CSS menu is very handy for your webpages.so lets get started.firstly we ‘ll discuss Html code which is very simple.So this is the beginner level tuet .The freshers would find this Css menu very handy and they can easily understand it.

The code is pretty simple in this Two level CSS menu.The Html Heirarchy is quire easy to understand .the nested html lists are used in here.we gonna use absolute positioning for the submenus.means the menus are placed on each other and the one with higher z-index will show up.Also all have set display property to hidden.which changes on the hover event along with the zindex.

So like all menu’s we’ll be using Html unordered lists.the menu will be having class =’catnav’ and which will be wrapped inside a div container with id=’navigation’.here the HTML code for this:

well that was easy i guess.you can clearly see the Html for the css menu  that we have just created unordered lists inside out main list items.Now we move further towards css where magic happens.when we hover over the list item in Out menu the sub items will show up in submenu for that list item.well here is the css code.

So let me clear CSS a bit.We have just given all the submenu’s a absolute position and also display property to hidden.
And added active class.the active class overwrites the display property to hidden from block.So by default we’ll be able
to see the contents of 1st submenu.You can change if you want.And onHover we have just switched the display property to
block and also z-index to a greater value.we are using the absolute positing for the submenu’s under the main menu labels.the absolute positing is the key here, which shows the top most or the submenu with the higher z- index. also on hover i have changed some colors to make it look pretty.so you can do same or use background images if you like.The border radius has been used for little gud looks.

So we have created the Great navigation menu without using the Jquery or the javascript.Just used CSS , So we should just know how to play with the things to produce some valuable results.Well we keep trying do produce newer things.thats what we do.
well i think those were all key points about this Two level Css menu.also you can see the live demo and download the
source code.
i hope you liked my post.if you liked it please thumbs up , like ,share and do rate the post.please post comment if any problem is found.

[jbutton  color=”blue” size=”medium”  link=”http://demo.designaeon.com/twolevelCSS/” newpage=”yes”]DEMO[/jbutton]

[jbutton link=”http://download.designaeon.com/twolevelcss.rar” color=”blue” size=”medium” ] DOWNLOAD[/jbutton]

Thanks ! Adios.

we were glad that you visited Design Aeon ! thanks for visiting our page and reading our post ‘Two level Css menu’.keep visiting Desingaeon.com .

[separator /]

Tags : , ,

Leave a Reply

Want to join the discussion ? Feel Free to contribute !