¿Crear imagen de fondo CSS que se superpone al borde?

Question

Tengo problemas para hacer que una imagen de fondo se superponga al borde de otro div. Tenemos un panel de barra lateral con varias barras laterales, incluido un menú de navegación. A la derecha está el panel de contenido. Nos gustaría nada seleccionado en la barra lateral a aparecer conectado al panel de contenido:

En el ejemplo anterior, hay una imagen de fondo en la <li> etiqueta de Información Personal. Me gustaría extender esta imagen un píxel a la derecha para que la línea al lado del valor seleccionado no esté visible.

Aquí es mi CSS para el submenú (seleccionado) y el área de contenido a la derecha:

.submenu-item li span{ 
    padding: 4px 0 4px 16px; 
    min-height: 16px; 
    border-bottom:0px; 
} 

.submenu-item li{ 
    font-size:12px; 
    border: none; 
    padding: 0px 0 0px 16px; 
} 

.submenu-item span.Active{ 
    background-image: url(../images/submenu-select.png); 
    background-repeat: no-repeat; 
} 

#Content { 
    margin-left:190px; 
    border-left: 1px solid #b0b0b0; 
    padding: 20px; 
    background: #FFFFFF; 
    min-height:600px; 
} 

¿Hay una manera de hacer esto que no sea poner un borde a la derecha en mi barra lateral (y excluyendo en la etiqueta del elemento de lista)?

Answer 1

Si tiene un borde en ese derecho, simplemente no puede eliminar esa parte del borde.

Sin embargo, estás de suerte. Intente usar margin-right: -1px; en su CSS. Esto arrastrará el elemento

a la derecha de 1 píxel, y con suerte sobre el borde. Es posible que tenga que configurar también

position: relative; 
z-index: 100; 

Además, debido a que se acabó con el píxel derecho 1, para que sea alinear a la izquierda con los demás, puede que tenga que hacer el elemento activo de 1 píxel más amplio.

Answer 2

La solución de Alex debería funcionar, pero otra forma de hacerlo sería quitar el atributo CSS de borde izquierdo de #Contenido y utilizar una imagen GIF o PNG gris de 1 píxel de ancho en el DIV que contiene los elementos del submenú.

De esta manera:

#SubMenu { background: url(grayline.gif) #CCCCCC top right; } 

que eliminaría la necesidad de preocuparse por el elemento de submenú seleccionado no está alineado.