如何更改水平菜單的樣式

Question

我有一個任務要做水平菜單。在創建菜單時，我遇到了一個與樣式有關的問題。當我們將菜單懸停時，它會跳躍，並且子菜單也會根據文本的大小以不同的位置出現。我的CSS文件

#wrapper { 
    width:100%; 
    height:500px; 
} 
h2 { 
    color:#787878; 
} 
#menu, #menu ul { 
    list-style: none; 
    //padding: 2px; 
} 
#nav{ 
    border-bottom: 1px solid #CCCCCC; 
    border-spacing: 0; 
    display: table; 
    float: left; 
    height: 25px; 
    width: 100%; 
} 
#nav ul { 
    margin: 0; 
    padding: 0; 
} 
#nav > ul > li:hover { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: #ccC#ccC#FFFFFF; 
    border-style: solid; 
    border-width: 1px; 
    padding-bottom: 0; 
    border-radius:1px; 
} 
.menu-child { 
    width:160px; 
    display:block !important; 

} 
#nav ul li ul li:hover { 
} 
#nav ul li ul :hover { 
} 
#menu { 
    float: left; 
    height: 25px; 
} 
#menu> li { 
    float: left; 
} 
#menu li a { 
    display: block; 
    height: 2em; 
    line-height: 2em; 
    padding: 0 1.5em; 
    text-decoration: none; 
} 
#menu ul { 
    position: absolute; 
    display: none; 
    z-index: 999; 
} 
#menu ul li a { 
} 
#menu li:hover ul { 
    display: block; 
} 
#menu { 
    font-family: Arial; 
    font-size: 12px; 
    //background: #F8F8F8; 
} 
#menu > li > a { 
    font-family: Verdana, Arial, sans-serif; 
    font-style: normal; 
    color:#787878; 
    font-weight: bold; 
} 
#menu > li > a:hover { 
    color: #000; 
} 
#menu ul { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-radius: 0 0 5px 5px; 
    margin-top: 1px; 
} 
#menu ul li a { 
    color: #000; 
} 
#menu ul li a:hover { 
    background: #E0E0E0; 
} 
.logout { 
    float:right; 
    width:300px; 
} 
.title { 
    float:left; 
    width:300px; 
} 
#footer { 
    width:100%; 
    height:100px; 
    float:left; 
} 
.subchild-list { 
    margin:0; 

    position: absolute !important; 
    top:0; 
    right:-87px; 
    //border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
.child-list ul { 
    display: none !important; 
    position: absolute !important; 
    z-index: 999 !important; 
} 
.child-list li { 
    position:relative !important; 

} 
.child-list li:hover ul { 
    display: block !important; 
} 

.child-list li{ 

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0; 
} 

.child-list ul{ 
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
} 

.child-list{ 
    border-bottom:5px solid #C0C0C0; 
} 
.nav-subchild 
{ 
    border-color: #ccC#FFFFFF #ccC#FFFFFF; 


} 

你可以看到從http://jsfiddle.net/ucpcA/1/我的代碼我怎樣才能解決這個問題？

Answer 1

添加到CSS這樣的：

li {border: 1px solid #fff;} 

我試圖在小提琴和它解決了「跳樓」

//編輯

的主要思想是邊界設置頂端li元素所以當你添加額外的邊框顏色它不會跳

//編輯2來解決你的第二個問題

來解答您的第二prbolem，就把這行

.subchild-list { 
margin:0; 
right:-150px; 
position: absolute !important; 
top:0; } 

#menu ul li {width: 150px;} 

這僅僅是一個例子，所以你會看到它做什麼。放在那裏你真正需要的ewidth。