2015-10-19 3 views
0

Моя проблема с моим фоном выпадающего меню - это то, насколько прозрачным и я могу видеть текст на странице за меню. Также я использую блоггер, если это имеет значение.Навигационный фон Проблемы с прозрачностью

Вот моя проблема в этом образе

enter image description here

Вот мой код здесь»

<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-me 
nu ul { 
margin: -15px; 
padding: 12px; 
list-style: none; 
} 

#mbt-menu ul { 
    border: none !important; 
    padding: 0 !important; 
    } 
#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: 0px 0 0 #469ee8; 
position: relative; 
} 
#mbt-menu a { 
float: left; 
padding: 10px 25px; 
color: #ffffff; 
text-transform: uppercase; 
font: bold 13px 'Trebuchet MS',Arial, sans-serif; 
text-decoration: none; 
text-shadow: 0 0px 0 #000; 
} 

#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: 55px; 
left: 15px; 
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 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; 
} 

/* non links */ 

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

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

#mbt-menu ul { 
pading: 7px; 
width: 130px; 
height: 34px; 
_height: 9px; 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
} 

#mbt-menu { 
font: bold 13px 'Trebuchet MS', Arial, sans-serif; 
text-decoration: none; 
text-shadow: 0 0px 0 #000; 
} 

</style> 

<div align=center> 

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



<li> 
<a href="#">Simology</a> 
<ul> 
       <li>Sims 

     <ul> 
       <li><a href="">Faries</a></li> 
       <li><a href="">Ghosts</a></li> 
       <li><a href="">Plant Sims</a></li> 
       <li><a href="">Witches</a></li> 
       <li><a href="">Werewolves</a></li> 
       <li><a href="">Vampires</a></li> 
       <li><a href="">Zombies</a> 

     </ul> 

</li> 

<li><a href="http://thesims3addictresource.blogspot.com/p/needs.html">Needs</a></li> 
<li><a href="http://thesims3addictresource.blogspot.com/p/skills.html">Skills</a></li> 
<li><a href="http://thesims3addictresource.blogspot.com/p/traits.html">Traits</a></li> 
<li><a href="http://thesims3addictresource.blogspot.com/p/moodlets.html">Moodlets</a></li> 

      <li><a href="">Life & Death</a> 

      <ul> 
       <li><a href="http://thesims3addictresource.blogspot.com/p/death.html">Death</a></li> 
       <li><a href="http://thesims3addictresource.blogspot.com/p/ghosts.html">Ghosts</a></li> 
      </ul> 
</li> 

<li><a href="http://thesims3addictresource.blogspot.com/p/lifetime-wishes.html">Lifetime Wishes</a></li> 
<li><a href="http://thesims3addictresource.blogspot.com/p/lifetime-rewards.html">Life Time Rewards</a></li> 




</ul> 
</li> 




<li> 
    <a href="#">Expansion Guide</a> 

     <ul> 
      <li><a href="#">Ambitions</a> 

       <ul> 
       <li><a href="">New Skills</a></li> 
       <li><a href="">New Lifetime Rewards</a></li> 
       <li><a href="">Celebrities</a></li> 
       </ul> 

      <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> 
       </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://thesims3addictresource.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> 
+0

предоставить ссылку на свой блог – Harsimran

ответ

1

Добавьте/обновите следующие записи в коде css.

#mbt-menu ul li, #mbt-menu>li li a { 
    background-color: #ffffff; 
} 

удалить также следующую ширину свойство. его вызывает проблемы в связи с фиксированной шириной ul элемента

#mbt-menu ul a{ 
    /*Other styles*/ 
    width:130px; 
    /*Other styles*/ 
} 
1

Пожалуйста, добавьте background-color свойство для следующего идентификатора.

#mbt-menu { 
    font: bold 13px 'Trebuchet MS', Arial, sans-serif; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #000; 
    background-color: /*your color code*/; 
} 
+0

Я проверил ваш код и его работы хорошо для меня. Вы уже добавили цвет фона для выпадающего меню # mbt-menu ul {background: #ffffff;}. Если он не работает, пожалуйста, добавьте! Важно после цвета, например: «background: #fff! Important;) –

+0

У меня все еще есть проблема здесь, посмотрите здесь на моем сайте здесь http://thesims3addictresource.blogspot.com/ –

+0

Обновите следующие стили на '# mbt-menu ul li'. и есть проблема с состоянием наведения на каждом элементе меню. Обновите меню # mbt-ul ul. Кроме того, ниже приведены обновленные стили, ' # mbt-menu уль Li { стиль границы: твердый; граница цвета: #EBEBEB; цвет фона: #ffffff важно, } MBT-меню # уль а { отступы: 7px; ширина: 113px; white-space: nowrap; float: none; text-transform: none; } ' –

Смежные вопросы