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 IE 9]>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
        <script type="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:hover ul {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><a href="">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:hover ul {display: block;}