If you want to remove the little blue triangle, simply delete the following 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 eliminate the background box around the drop-down menu, add these rules instead:
#mbt-menu ul {
border: none !important;
padding: 0 !important;
}
If you wish to get rid of the blue border (which is actually a box shadow) on the right side of the box, you can go ahead and remove 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;
For adjusting the positioning of the drop-down menu to align properly with the parent link, modify the left and top properties in this section:
#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;
}