How to change the style of horizontal menu - css

Question

I have got a task to do horizontal menu. While creating the menu i got a problem with the style.When we are hovering the menu it is jumping and also the sub child menu is comes at different position depending on the size of the text. My css file is
#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;
}
You can see my code from http://jsfiddle.net/ucpcA/1/ How can i solve this problem?

Answer 1

Add to css this:
li {border: 1px solid #fff;}
I tried it in fiddle and it solved "jumping"
//Edit
The main idea is to set border to the top li elements so when you add additional border with color it will not jump
//Edit 2 to solve your 2nd problem
To sovle your 2nd prbolem put this line
.subchild-list {
margin:0;
right:-150px;
position: absolute !important;
top:0; }
#menu ul li {width: 150px;}
It is just an example so you will see what it does. Put there the ewidth which you really need.