dynamic menu using html, css & javascript

am a beginner, writing one interface to create a dynamic menu(cascading) using html, java开发者_如何学JAVAscript & css3 based on the menu items given by the server. what is the best approach to encounter this scenario. awaiting your value input on this. thank you all.

Define a div for the menu and maybe a ul-li list for the menu or define the div hierarchically to match the levels in your menu and define the styles to the divs and add the javascript or jquery to the div or ul id. Think this is what you need.

You should make sure your menu works using css only to begin with using :hover psuedo attribute. Once you have it working in css only then you would start to enable .js slides etc for nice animations.

If you use .js before making sure it works with css you will produce a menu that won't work in non .js environments

the standard way is:

ul
 li
  div
 li
  div
   ul
    li
     div
   /ul
  /div
 /ul

and the css:

.menu li:hover > div {display:block}

Which means when you hover the li it will show the div and as long as you are holding the mouse over the contained div it wil show (allowing you to hover over contained li elements which wil again show the conatined div)

It is not as simple as I have shown but that is the general theory. Creating a nested menu is moderately tricky to get working cross browser (beware margins, padding and floated anchors - sometimes they can cause slight gaps which will cause the menu to disappear when trying to move between menu items...)