Как изменить стиль горизонтального меню

Question

У меня есть задача сделать горизонтальное меню. При создании меню у меня возникла проблема со стилем. Когда мы наводим меню, он прыгает, а также дочернее дочернее меню приходит в разных положениях в зависимости от размера текста. Мой файл КСС

#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, чтобы решить вашу вторую проблему

Чтобы sovle ваш второй prbolem поставить эту линию

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

#menu ul li {width: 150px;} 

Это просто пример, так что вы увидите, что он делает. Положите там необходимую вам пропускную способность.