ROZWIĄZANY: Problem z menu

[Amfidiusz]

Heya,

Mam problem z poprawnym ustawieniem menu w jednym z moich szablonów. Górny rząd jest zawsze widoczny, dolny pojawia się w hover. Jednak gdy najadę kursorem na dowolny element menu, który nie jest pierwszym, całe sub-menu jest przesunięte w prawo.

Czy ktoś orientuje się, w jaki sposób mogę to naprawić?

/************ sf-menu **********************/

.sf-menu {width:100%; padding:0px 0 0 0px; background:none; position:relative; left:10px; top:0px;}
.sf-menu li.bgr {float:left; padding:0; background:none;}
.sf-menu li.bgr:hover, .sf-menu li.bgr.sfHover, .sf-menu li.current{float:left; padding:0;
background: #149ed9;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1086c3), to(#19b7ef));
background: -moz-linear-gradient(#1086c3, #19b7ef);
background: linear-gradient(#1086c3, #19b7ef);
-pie-background: linear-gradient(#1086c3, #19b7ef);
background-image: -o-linear-gradient(#1086c3, #19b7ef);
box-shadow:3px 3px 3px rgba(0,0,0,0.28);
-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.28);
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.28);}

.sf-menu li.bgr a {display:block; padding:12px 10px 13px 9px; color:#32444d; font-size:14px; line-height:1.3em; font-weight:bold; text-transform:uppercase; text-align:center; background: none;}
.sf-menu li.bgr:hover a, .sf-menu li.bgr.sfHover a, .sf-menu li.current a{color:#fff;}

<div class="row-3">
                       <nav>
                               <ul class="sf-menu">
                                       <li class="current bgr"><a href="#">NFL</a>
                                               <ul>
                                                  <li><a href="#">Scores</a></li>
                                                  <li><a href="#">Schedule</a></li>
                                                  <li><a href="#">Standings</a></li>
                                                  <li><a href="#">Stats</a></li>
                                                  <li><a href="#">Power</a></li>
                                                  <li><a href="#">Rankings</a></li>
                                                  <li><a href="#">Teams</a></li>
                                                  <li><a href="#">Players</a></li>
                                                  <li><a href="#">Rumors</a></li>
                                                  <li class="last"><a href="#">Transactions</a></li>
                                               </ul>
                                       </li>
                                       <li class="bgr"><a href="#">NFL</a>
                                               <ul>
                                                  <li><a href="#">Scores</a></li>
                                                  <li><a href="#">Schedule</a></li>
                                                  <li><a href="#">Standings</a></li>
                                                  <li><a href="#">Stats</a></li>
                                                  <li><a href="#">Power</a></li>
                                                  <li><a href="#">Rankings</a></li>
                                                  <li><a href="#">Teams</a></li>
                                                  <li><a href="#">Players</a></li>
                                                  <li><a href="#">Rumors</a></li>
                                                  <li class="last"><a href="#">Transactions</a></li>
                                               </ul>
                                       </li>
                                       <li class="bgr"><a href="#">MLB</a></li>
                                       <li class="bgr"><a href="#">NBA</a></li>
                                       <li class="bgr"><a href="#">NHL</a></li>
                                       <li class="bgr"><a href="#">ncaa fb</a></li>
                                       <li class="bgr"><a href="#">ncaa bb</a></li>
                                       <li class="bgr"><a href="#">nascar</a></li>

                               </ul>
                       </nav>
               </div>

[OmegaOne]

Pewnie dlatego ze ul w li.bgr zaczyna się tam gdzie owo li.

li.bgr > ul trzeba by ustawić w pozycji absolutnej do nav/glownego ul + z-index aby się pojawiało nad.

To tak na oko.

[Amfidiusz]

Nic nie zrozumiałem

[OmegaOne]

to zamotam jeszcze bardziej

.sf-menu {
/*border: 1px solid red;*/
position: relative;
z-index: 1000;
}
.sf-menu li {
list-style: none;
padding: 0;
float: left;
}
.sf-menu li > ul {
position:absolute;
top: 42px;
left: 0;
z-index: 5000;
padding: 0;
margin: 0;
/*border: 1px solid blue;*/

background: #149ed9;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1086c3), to(#19b7ef));
background: -moz-linear-gradient(#1086c3, #19b7ef);
background: linear-gradient(#1086c3, #19b7ef);
-pie-background: linear-gradient(#1086c3, #19b7ef);
background-image: -o-linear-gradient(#1086c3, #19b7ef);
box-shadow:3px 3px 3px rgba(0,0,0,0.28);
-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.28);
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.28);
}

.sf-menu li > ul {
display: none;
}
.sf-menu li:hover > ul {
display: block;
}
.sf-menu:after {
display: block;
content: "";
clear:both;
height: 0;
visibility: hidden;
}

[Gość MotyF]

Dlaczego pozycja relative? Sam stylowałeś czy..?

Nie pojmuje wpisów typu:

.sf-menu {width:100%; padding:0px 0 0 0px; background:none; position:relative; left:10px; top:0px;}

co za padding? Po co top 0px? Nadpisujesz coś?

A pozycja jest ustawiona tak, że zawsze zachodzi Xpx za element aktywny. Nie lepiej napisać sobie samemu, jeżeli to sam CSS? Albo jquery użyć?

PS. Uważaj z webkit'ami. Lepiej dać background: #kolor url(plik.jpg) repeat-x top left; czy coś podobnego. Każda przeglądarka pokaże to samo. A po co pisać specjalnie pod ie styl css?

Żadnego float dla ul i li, nie widzę stylu row3 - może od ma coś dopisane.

Edytowane 8 Października 2011 przez MotyF

[Amfidiusz]

Dzięki, Panowie! Odpuszczam sobie tę templatkę. Jak sami zauważyliście, styl jest tragicznie zakodowany, co chwilę musze walczyć z takimi elementami, jak to logo. Do tego, jak wspomniał Motyf, na IE robi się totalna kaszana.

Można zamknąć, nie ma sensu dalej w to brnąć.

[Jakub]

Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu.

Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum.