Rozwijane menu

Założony przez  Szogi1910.

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">
* {
margin0padding0;}
#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
[Obrazek: 54095232987400490876.jpg]
Wystylizuj sobie tak jak masz tamto. https://webboard.pl/thread-45824.html
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
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">
* {
floatright;
margin-top33px;}
#menu li {list-style: none;
displayinline-block;
margin0 4px 0 0;}
#menu {height: 20px;}
#menu ul {visibility: hidden; position: absolute; top: 70%; left: 0;}
#menu li {list-style: none;
displayinline-block;
margin0 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;
backgroundurl(images/carbon/trans10.pngrepeat;
backgroundrgba(0,0,0,0.1);
-
webkit-border-radius3px;
-
moz-border-radius3px;
border-radius3px;
-
webkit-box-shadowinset rgba(0,0,0,0.80px 1px 5pxrgba(255,255,255,0.020px 0px 0px 1pxrgba(255,255,255,0.050px 1px 0px;
-
moz-box-shadowinset rgba(0,0,0,0.80px 1px 5pxrgba(255,255,255,0.020px 0px 0px 1pxrgba(255,255,255,0.050px 1px 0px;
box-shadowinset rgba(0,0,0,0.80px 1px 5pxrgba(255,255,255,0.020px 0px 0px 1pxrgba(255,255,255,0.050px 1px 0px;
displayblock;
outlinenone;
padding0px 15px;
line-height34px;
height34px;
positionrelative;
font-weightbold;
transitionall 0.3s;
-
moz-transitionall 0.3s;
-
webkit-transitionall 0.3s;}
#menu li li a {width: 140px;}
#menu li:hover a, #menu li:hover li:hover a {color: #fff;
backgroundurl(images/carbon/trans10.pngrepeat;
backgroundrgba(0,0,0,0.3);
transitionall 0.3s;
-
moz-transitionall 0.3s;
-
webkit-transitionall 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ć...
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
Dziwny sposób na dodawanie CSS. Nie spotkałem się z czymś takim :)
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
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

[Obrazek: 98201910309666993184.jpg]
[Obrazek: 27156989028019395340.jpg]

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
* {margin0padding0;}
#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);} 



Użytkownicy przeglądający ten wątek:

1 gości