Bordas e sombreamentos no submenu

[aneew 0]

Olá, boa tarde.

Cá estou de novo com uma duvida sobre meu menu. Estou fazendo um menu pro meu site, e estou com um novo problema.

Eu preciso que o menu tenha essa borda aqui no sub-menu



PORÉM, a borda que eu coloquei, está com uma falha, veja:



percebe que a box shadow está distante do começo do lado esquerdo do submenu?

Então, o que eu posso fazer?

Segue o codigo css

ul {list-style:none;width:350px;float: left; }

ul li {
position:relative; }


ul li a {
display:block;
list-style: none;
background: transparent;
color: #072D18;
font-family: Calibri, serif;
text-decoration: none;
padding: 40px;
border-style: solid;
border-bottom-width: 1px;
border-top-width: 1px;
border-right-width: 0;
border-left-width: 0;}

ul li:nth-child(1) {
border-top: 1px solid #072D18;
}

ul li:nth-child(3) {
border-bottom: 1px solid #072D18;
}

ul li a:hover {
background: #a3a3a3;
transition-duration: 0.5s;
}

ul li ul {
display:none;
position: absolute; }


ul li:hover ul {
display:block;
position:absolute;
left: 308px;
top: -1px;
min-width: 100%;
box-shadow: 0 1px 2px #333 ;
-webkit-box-shadow: 0 1px 2px #333;
-moz-box-shadow: 0 1px 2px #333;
}

[L. Henrique 179]

Teria como você postar o código HTML também? Assim podemos colocar o projeto no JSFiddle e trabalhar uma solução.

Mesmo assim vou tentar te ajudar o mais próximo possível. O seu submenu está sobrepondo o menu, isso não é uma falha com o box-shadow ou algo assim. Isso é uma questão de posicionamento mesmo.

Tente consertar isso dando um margin-left no submenu, exemplo:

.submenu {
   margin-left: 20px;
}

Se isso não funcionar, retorne com a continuação e o código HTML para ajudarmos.

[pwd 7]

Pelo seu UX, a borda tem que ser negativa.