Hello, I have hit a second snag by adding a black line on my menu i now have a tiny line on the end of my menu see picture top right

 

Does anyone know how i can stop this line at the end only. Please see my css code:

/* menu */
#menu {

background-image: url('../image/menu_bg.png');
border-bottom: 1px solid #000000;
       width: 722px;	
       height: 37px;
margin-bottom: 30px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;	
}
#menu > ul > li:hover {
background: #000;
}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 12px 15px 11px 15px;
z-index: 6;
position: relative;
border-right: 1px solid #000000;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

 

Posted all the code for the menu in case you needed it. anyone that could help would be a great help.

 

Kind Regards

Stephen

You will need to create a separate .li class for the end button that doesn't include:

 

border-right: 1px solid #000000;

Edited January 5, 201214 yr by Bomb

You will need to create a separate .li class for the end button that doesn't include:

 

border-right: 1px solid #000000;

 

How do i do that please

You will need to create a separate .li class for the end button that doesn't include:

 

border-right: 1px solid #000000;

 

can you give me an example of that please mate

I see from your screenshot in the other thread you have solved it??

I see from your screenshot in the other thread you have solved it??

 

Hello, yes! i ended up copying the full menu css under a new div with out the line on it. it might have been a long way to do it but it worked so i am happy lol