nice menu的CSS設定

各位好：
今天TKY給nice menu搞死了。把主導覽列設定成nice menu後，發現一個問題很奇怪。
如果設定nice menu為右側或左側彈出的選單，滑鼠移到每個母層（ul）時，才會展開子層(li)選單。
但如果設定nice menu為水平排列、下側彈出的選單，第一層母層選單的顯示正常，但第二層開始，只要滑鼠移到第二層母選單（ul ul）上，底下不管有幾層子選單全都一股腦彈出來。

這樣就算了，如果第二層之後有接連兩個母選單上下排在一起，母選單的子選單就會疊在一起。應該要分別顯示的子選單因為一起彈出來，有些選單就會被擋到了。

真的很苦惱，CSS功力不夠好，搞不太懂要改哪裡才能讓水平式的nice menu和直立式的選單一樣正常顯示。

大家出個主意吧！

TKY

下面是nice menu的CSS：

[quote]/* $Id: nice_menus.css,v 1.6.2.4 2006/08/11 14:16:28 jakeg Exp $ */
/*
To help understand the CSS, the HTML looks like this (where x is a number; TYPE is down/left/right; PATH is the menu path such as node/343; MID is the menu id such as 33):

• This is a menu item
• A submenu
  • ...

...

If you have more than one nice-menu and want to target a particular one, use its id (e.g. ul.#nice-menu-2)

See README.txt for some CSS customization examples!

First we're going to define CSS for all menus, then we'll define based on the type of menu
*/

/* below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff */
.block-nice_menus {
line-height: normal;
/*font-size: normal;*/
/*position: relative;*/
z-index: 10;
}

/* need this to enable hidding inner span */
.block-nice_menus h2.title {
margin: 0;
}
.block-nice_menus h2.title .nice-menu-hide-title {
display: none;
}
.block-nice_menus h2.title .nice-menu-show-title {
display: block;
margin-bottom: 5px;
}

ul.nice-menu,
ul.nice-menu ul{
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #ccc;
z-index: 5;
}

ul.nice-menu li {
border: 1px solid #ccc;
border-top: 0;
position: relative;
float: left;
background-color: #eee;
}

ul.nice-menu a {
padding: 0.3em 15px 0.3em 5px;
display: block;
}

ul.nice-menu ul{
position: absolute;
top: 1.8em;
left: -1px;
border: 0;
border-top: 1px solid #ccc;
margin-right: 0;
display: none;
}

ul.nice-menu li.over ul{
display: block;
}

ul.nice-menu ul li{
width: 12.5em;
display: block;
}

ul.nice-menu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Show submenus when over their parents */
ul.nice-menu li:hover ul,
ul.nice-menu li.menuparent li:hover ul,
ul.nice-menu li.menuparent li.menuparent li:hover ul,
ul.nice-menu li.over ul,
ul.nice-menu li.menuparent li.over ul,
ul.nice-menu li.menuparent li.menuparent li.over ul{
display: block;
}

/* Hide sub-menus initially */
ul.nice-menu li:hover ul ul,
ul.nice-menu li:hover ul ul ul,
ul.nice-menu li.over ul ul,
ul.nice-menu li.over ul ul ul,
ul.nice-menu li.over ul ul ul li{
display: none;
}

/* Now stuff specific to the menu type (down, left or right menu pop) */

/* All VERTICAL (left/right) menus */

/* This is the default width of vertical menus. You can override these in your own stylesheet. */
ul.nice-menu-right, ul.nice-menu-left,
ul.nice-menu-right li, ul.nice-menu-left li{
width: 12.5em;
}

/* stuff for VERTICAL menus where submenus pop RIGHT (default) */

ul.nice-menu-right ul {
width: 12.5em;
left: 12.5em;
top: -1px;
}

ul.nice-menu-right ul ul {
width: 12.5em;
left: 12.5em;
top: -1px;
}

ul.nice-menu-right li.menuparent,
ul.nice-menu-right li li.menuparent{
background: #eee url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-right li.menuparent:hover,
ul.nice-menu-right li.over,
ul.nice-menu-right li li.menuparent:hover,
ul.nice-menu-right li li.over{
background: #ccc url(arrow-right.png) right center no-repeat;
}

/* stuff for VERTICAL menus where submenus pop LEFT */

ul.nice-menu-left li ul{
width: 12.5em;
left: -12.65em;
top: -1px;
}

ul.nice-menu-left li ul li ul {
width: 12.5em;
left: -12.65em;
top: -1px;
}

ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent{
background: #eee url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li.over,
ul.nice-menu-left li li.menuparent:hover,
ul.nice-menu-left li li.over{
background: #ccc url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left a, ul.nice-menu-left ul a {
padding-left: 14px;
}

/* stuff for HORIZONTAL menus where submenus pop DOWN */

ul.nice-menu-down {
float: left;
border: 0;
}

ul.nice-menu-down li {
border: 1px solid #FFF;
background:none;
}

ul.nice-menu-down li li {
border-right: 1px solid #999999;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
background: #CCCCCC;
}

ul.nice-menu-down ul {
left: 0;
background: #CCCCCC;
}

ul.nice-menu-down li ul li ul {
left: 12.5em;
top: -1px;

}

ul.nice-menu-down .menuparent a{
padding-right: 15px;
}

ul.nice-menu-down li.menuparent{
background: url(arrow-down.png) right center no-repeat;
}

ul.nice-menu-down li.menuparent:hover,
ul.nice-menu-down li.over{
background: url(arrow-down.png) right center no-repeat;
}

ul.nice-menu-down li li.menuparent{
background: #eee url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-down li li.menuparent:hover,
ul.nice-menu-down li li.over{
background: #ccc url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-down li ul li {
background: #eee;

}[quote]