目的のカテゴリにカーソルを合わせると、そのカテゴリのページのリストが下に水平に表示されるナビゲーション パネルを作成しようとしています。私はそれの主な大部分を持っていますが、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>