навигация выпадающего меню проблемы с границей

Question

Я хочу, чтобы выпадающая часть меню имела границы вокруг и бросала выпадающую часть меню. Я также хочу избавиться от синей границы, которая отображается справа от выпадающего меню.

Изображение ниже показывает меня проблема и то, что я хочу:

Вот код для моего меню навигации:

<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

Чтобы избавиться от маленького синего треугольника, удалите это правило:

#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 { 
    border: none !important; 
    padding: 0 !important; 
} 

Чтобы удалить синий (фактически тень коробок) в правой части окна, удалите эти правила:

#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; 

Для того, чтобы настроить расположение выпадающего меню, так что он прекрасно совмещается с родительской линии связи, регулировать left и top свойства здесь:

#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

Вы по существу хотите что-то вроде этого:

#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;} 

Я бы не добавил стилей, как это. Это предназначено только для демонстрационных целей. Возможно, вам придется сделать эти стили более конкретными для них, чтобы переопределить то, что уже есть. (Я просто тестировал через терминал CSS.) В идеале, интегрируйте эти стили в свой существующий код, где они принадлежат.

У вас есть стили для родительского ul/li, которые влияют на sub ul/li, поэтому идеально изменить эти правила, чтобы нацелить только верхний уровень, используя что-то вроде дочернего селектора (>).