Menu Items Not Showing Up Properly As A Mega Menu

I need to make a mega menu similar to one as show in image below So far i have been able to make it work to some extent example on jsFiddle HERE. So far i have some design issue a

Solution 1:

Add the following in the head of the document,

    <!--[if lt IE9]>
        <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script><scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>       
    <![endif]-->

And use the method suggested by Rachel Reveley.

li:hoverul {display: block;}

The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.

Solution 2:

Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.

If you change your structure to something more like this

<ul><li><ahref="">Click me</a><ul><li>This is showed when Click Me! is clicked.</li></ul></li></ul>

you can simply do this with your CSS

li:hoverul {display: block;}