Rozwijane menu

wersja skryptu MyBB:1.6.12
adres forum:gamemods.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Jak dopasować ten kod rozwjane menu do buttonów strona główna itp

<li><style type="text/css">
* {margin: 0; padding: 0;}
#menu li {list-style: none;}
#menu {height: 20px;}
#menu ul {visibility: hidden; position: absolute; top: 70%; left: 0;}
#menu li {float: left; padding-right: 1px; position: relative;}
#menu li li {float: none; padding-top: 1px; width: 120px;}
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; color: #fff; background-color: #666;}
#menu li li a {width: 140px;}
#menu li:hover a, #menu li:hover li:hover a {background-color: #333095;}
</style>
<ul id="menu">
    <li><a href="#"><font color="#4c98ff"><b>Sklep</b></font></a>
    <ul>
      <li><a href="#">EasyBlock</a></li>
      <li><a href="#">Easbylock2</a></li>
      <li><a href="#">Easyblock3</a></li>
    </ul>
  </li>
 </ul> 
</ul></li> 


Sam się męczyłem to tylko forum mi się trochę rozjechało i nie mogę dopasować wyglądu i pozycji dla niego

Wystylizuj sobie tak jak masz tamto. https://webboard.pl/thread-45824.html

Właśnie próbuje i za groma nie mogę uzyskać takiego efektu jak chce

---

Udało mi się to zrobić.
Tylko kurde nie mogę dodać rozwiązania aby po wskazaniu na to menu było ono lekko przyciemniane tak jak w oryginale jest

Spróbuj:

<li><style type="text/css">
* {float: right;
margin-top: 33px;}
#menu li {list-style: none;
display: inline-block;
margin: 0 4px 0 0;}
#menu {height: 20px;}
#menu ul {visibility: hidden; position: absolute; top: 70%; left: 0;}
#menu li {list-style: none;
display: inline-block;
margin: 0 4px 0 0;}
#menu li li {float: none; padding-top: 1px; width: 120px;}
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {color: #9a9a9a;
background: url(images/carbon/trans10.png) repeat;
background: rgba(0,0,0,0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.02) 0px 0px 0px 1px, rgba(255,255,255,0.05) 0px 1px 0px;
-moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.02) 0px 0px 0px 1px, rgba(255,255,255,0.05) 0px 1px 0px;
box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.02) 0px 0px 0px 1px, rgba(255,255,255,0.05) 0px 1px 0px;
display: block;
outline: none;
padding: 0px 15px;
line-height: 34px;
height: 34px;
position: relative;
font-weight: bold;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;}
#menu li li a {width: 140px;}
#menu li:hover a, #menu li:hover li:hover a {color: #fff;
background: url(images/carbon/trans10.png) repeat;
background: rgba(0,0,0,0.3);
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;}
</style>
<ul id="menu">
    <li><a href="#"><font color="#4c98ff"><b>Sklep</b></font></a>
    <ul>
      <li><a href="#">EasyBlock</a></li>
      <li><a href="#">Easbylock2</a></li>
      <li><a href="#">Easyblock3</a></li>
    </ul>
  </li>
 </ul> 
</ul></li> 


Szczerze to sam nie wiem jak to będzie wyglądać...

Dziwny sposób na dodawanie CSS. Nie spotkałem się z czymś takim

Całe forum się rozjechało.
Ogólnie zauważyłem że jak dodałem menu już do stylu gotowego (bo wcześniej robiłem na tym samym ale testowym) to mam ucięte menu i rozjechane tytuły przy działach




SLAVOO, Taki sposób tu na forum znalazłem jedne z nielicznych

//Edit
Trochę przerobiłem to menu i teraz jest mianowicie w szablonie header mam tylko

<li> <span class="menu">
 <ul id="menu">
  <li><a href="#"><font color="#4c98ff"><b>Sklep</b></font></a>
    <ul>
      <li><a href="#">EasyBlock</a></li>
      <li><a href="#">Easbylock2</a></li>
      <li><a href="#">Easyblock3</a></li>
    </ul>
  </li>
 </ul> 
</ul></li> 
 </span>
</li> 


A za wygląd odpowiada teraz szablony menu.css

* {margin: 0; padding: 0;}
#menu li {list-style: none;}
#menu {height: 20px;}
#menu ul {visibility: hidden; position: absolute; top: 70%; left: 0;}
#menu li {float: margin: -1px 2px 0 0; 1px; position: relative;}
#menu li li {float: none; padding-top: 1px; width: 120px;}
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; color: #fff; background: rgba(0,0,0,0.1);}
#menu li li a {width: 90px;}
#menu li:hover a, #menu li:hover li:hover a background: rgba(0, 0, 0, 0.2);}