navigation dropdown menu border issues

Question

I want the drop down part of the menu to have borders both around and throw the drop down part of the menu. I also want to get rid of the blue border that shows on the right of the drop down menu.

The image below shows the problem i am having and what i want:

Here is the code for my navigation menu:

<div style="text-align: left;">

<style>


#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat:  no-repeat;

background-color: transparent;
display: block;
width: 126px;
height: 140px;
}


#homelink {
position: relative;
padding: 0;
margin: -97px;
}


#mbt-menu, #mbt-menu ul {
margin: -15px;
padding: 17px;
list-style: none;
}

#mbt-menu ul {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}

#mbt-menu:after {
clear: both;

}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 1px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#mbt-menu li ul a{
color: #000000;
}

#mbt-menu li ul a{
color: #000000;
}

#mbt-menu li ul a:hover{
color: #057BBA;
}

#mbt-menu li:hover > a {
color: #0;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul li {
border-style: solid;
border-color: #EBEBEB;
}


#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px;
left: 0;
z-index: 9999;
background: #ffffff;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/


}
#mbt-menu ul li {

float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
border: 1px solid #EBEBEB;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 130px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}


#mbt-menu ul a{
font-size: 12px;
}

#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<div align=center>

<ul id="mbt-menu"> 
<li><a id=homelink href="http://sims3addictresource.blogspot.com/"></a></li> 



<li> 
<a href="#">Simology</a> 
<ul> 
<li><a href="http://sims3addictresource.blogspot.com/p/needs.html">Needs</a></li> 
<li><a href="http://sims3addictresource.blogspot.com/p/skills.html">Skills</a></li> 
<li><a href="http://sims3addictresource.blogspot.com/p/traits.html">Traits</a></li> 
<li><a href="http://sims3addictresource.blogspot.com/p/moodlets.html">Moodlets</a></li> 
<li><a href="http://sims3addictresource.blogspot.com/p/lifetime-wishes.html">Lifetime Wishes</a></li>
<li><a href="http://sims3addictresource.blogspot.com/p/lifetime-rewards.html">Life Time Rewards</a></li>
<li><a href="http://sims3addictresource.blogspot.com/p/death.html">Death</a></li> 
<li><a href="http://sims3addictresource.blogspot.com/p/ghosts.html">Ghosts</a></li>
</ul> 
</li> 


<li> 
<a href="#">Expansion Guide</a> 
<ul> 
<li><a href="#">Ambitions</a></li> 
<li><a href="#">Generations</a></li> 
<li><a href="#">Pets</a></li> 
<li><a href="#">Late Night</a></li> 
<li><a href="#">Supernatural</a></li> 
<li><a href="#">World Adventures</a></li> 
<li><a href="#">University Life</a></li>
</ul> 
</li> 


<li> 
<a href="#">Towns</a> 
<ul> 
<li><a href="#">Sunset Valley</a></li> 
<li><a href="#">Monte Vista</a></li> 
<li><a href="#">Hidden Springs</a></li> 
<li><a href="#">Dragon Valley</a></li> 
<li><a href="#">Roaring Heights</a></li> 
</ul> 
</li> 

<li>
<a href="#">Free Downloads</a>


       <ul>
     <li><a href="http://sims3addictresource.blogspot.com/p/custom-sims.html"> Custom Sims </a></li>
      <li><a href="#">Sliders</a></li>
     </ul>
</li>


<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li> 

</ul>

</div>
</div>

Answer 1

To get rid of the little blue triangle, remove this rule:

#mbt-menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #469ee8;
}

To remove the background box around the drop down menu, add these rules:

#mbt-menu ul {
    border: none !important;
    padding: 0 !important;
}

To remove the blue border (actually a box shadow) along the right side of the box, delete these rules:

#mbt-menu li {
    float: left;
    border-right: 1px solid #328ad4;
    -moz-box-shadow: 1px 0 0 #469ee8; /* DELETE */
    -webkit-box-shadow: 1px 0 0 #469ee8; /* DELETE */
    box-shadow: 1px 0 0 #469ee8; /* DELETE */
    position: relative;

To tweak the positioning of the drop down menu, so it aligns nicely with the parent link, adjust the left and top properties here:

#mbt-menu ul {
    margin: 20px 0 0 0;
    _margin: 0;
    opaciaty: 0;
    visibility: hidden;
    position: absolute;
    top: 46px; /* ADJUST DROP DOWN */
    left: 0;  /* ADJUST DROP DOWN */
    z-index: 9999;
    background: #ffffff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

Answer 2

You essentially want something like this:

#mbt-menu ul {border:none; padding: 0;}

#mbt-menu li li {box-shadow: none; border-width: 2px 2px 0 2px;}

#mbt-menu li li:last-child {border-bottom-width: 2px;}

I wouldn't add the styles in like that, though. This is for demo purposes only. You may need to make those styles more specific for them to override what's there already. (I just tested via a CSS terminal.) Ideally, integrate these styles into your existing code where they belong.

You have styles for the parent ul/li that are affecting the sub ul/li, so ideally change those rules to target just the top level ones, using something like the child selector (>).