Html 仅使用CSS将主类别悬停时，使辅助导航保持在位

我正在尝试创建一个导航面板，您可以将鼠标悬停在所需类别上，该类别的页面列表水平显示在下方。我已经记下了它的主要部分，但我不知道如何在类别悬停在上面而不使用Javascript之后，使页面列表（辅助导航部分）保持不变

由于工作限制，我正在使用旧版本的Firefox（10.0.1）进行开发

以下是我所拥有的：

<style>
body,a,ul,li{margin:0;padding:0;text-decoration: none}
*{font-family: verdana;font-size: 12px;color:#333;}
#nav{
    margin-left: 20px;
    width: 400px;
    height: 50px;
}
#nav:after{
    position: absolute;
    content: "";
    width: 400px;
    height: 30px;
    background: #888;
    z-index: 0;
}
    #nav > ul{
        position: relative;
    }
    #nav > ul:before{
        content: "";
        display: table-cell;
        width: 100%;
    }
        #nav > ul > li{
            background: #ccc;
            height: 50px;
            display: table-cell;
            white-space: nowrap;
            vertical-align: middle;
            padding: 0 15px 0 15px;
        }
            #nav > ul > li > ul{
                background: #bbb;
                position: absolute;
                left: 0;
                display: table-cell;
                height: 30px;
                bottom: -30px;
                z-index: 1;
            }
                #nav > ul > li > ul > li{
                    background: #aaa;
                    display: none;
                    height: 30px;
                    padding: 0 10px 0 10px;
                    vertical-align: middle;
                }
                #nav > ul > li:hover > ul > li{
                    display: table-cell;
                }
</style>
<div id="nav">
    <ul>
        <li><a href="#">Cat 1</a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </li>
        <li><a href="#">Cat 2</a></li>
        <li><a href="#">Cat 3</a>
            <ul>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </li>
    </ul>
</div>

正文，a，ul，li{边距：0；填充：0；文本装饰：无}
*{字体系列：verdana；字体大小：12px；颜色：#333；}
#导航{
左边距：20px；
宽度：400px；
高度：50px；
}
#导航：之后{
位置：绝对位置；
内容：“；
宽度：400px；
高度：30px；
背景：#888；
z指数：0；
}
#导航>ul{
位置：相对位置；
}
#导航>保险商实验室：之前{
内容：“；
显示：表格单元格；
宽度：100%；
}
#导航>ul>li{
背景：#ccc；
高度：50px；
显示：表格单元格；
空白：nowrap；
垂直对齐：中间对齐；
填充：0 15px 0 15px；
}
#导航>ul>li>ul{
背景:#bbb ;；
位置：绝对位置；
左：0；
显示：表格单元格；
高度：30px；
底部：-30px；
z指数：1；
}
#导航>超视距>视距>超视距>视距{
背景：#aaa；
显示：无；
高度：30px；
填充：0 10px 0 10px；
垂直对齐：中间对齐；
}
#导航>超视距>视距：悬停>超视距>视距{
显示：表格单元格；
}

我找到了一个解决方案：

#nav > ul > li:hover > ul:after{
    display: table-cell;
    content: "";
    width: 1000px;
}

这将填充第二个ul中剩余的空白，使其在光标位于其上时保持活动状态