Javascript 菜单项未正确显示为超级菜单

我需要制作一个类似下图所示的超大菜单

到目前为止，我已经能够使它在某种程度上工作的例子

到目前为止，我有一些设计问题和一个功能问题

当我试图隐藏每个下拉菜单的默认文本时

/$（this.find（“.nav info”）.hide（）然后菜单4和5不会显示在右侧

实际上，我正在尝试创建一个与此类似的菜单。
在这个网站上，他们还显示了一个默认的文本为家长菜单，我并不需要实际上

我修改了脚本，以显示子菜单的第一个li，它可以为父菜单1、2查找子菜单，但为菜单4和5创建了对齐问题

如果有人能帮我解决这个问题，我将不胜感激

代码












此处将显示简要内容sub-1-relative-1

简要内容将显示在此处的sub-1-relative-2

简要内容将显示在这里，子1-relative-3











此处将显示简要内容sub-2-relative-1

此处将显示简要内容sub-2-relative-2

简要内容将在此处显示，第2-3小节





文本将在这里







文本将在这里

文本将在这里



这是默认文本，当我试图隐藏它时，此菜单将向左移动











简要内容将显示在这里，第5-3小节

简要内容将显示在这里，第5-2小节

简要内容将显示在这里，第5-3小节

简要内容将显示在这里，第5-4小节



除非您支持IE6，否则您不需要JavaScript来使下拉菜单正常工作

如果你把你的结构改成这样

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

在文档的开头添加以下内容：

    <!--[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]-->

该代码添加了对旧浏览器上的HTML5和CSS3的支持。而且它似乎对我来说非常适合。
@我至少需要IE 7的支持。我怎样才能在李康旁边显示相关的div呢？请至少给我看一个菜单作为示例，这样我就可以从他们的菜单中获取它。如果你已经在fiddle上进行了测试，你可以给我fiddle链接吗？谢谢，我试着做了一些更改，但到目前为止没有成功ul{}需要一个位置：绝对；然后离开
li:hover ul {display: block;}

    <!--[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]-->

li:hover ul {display: block;}