Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Menu nachodzi na tabelę

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Menu nachodzi na tabelę

Post 09.04.2017, 15:39:31

Cześć, mam takie pytanie: jak zrobić żeby menu nie nachodziło na tabelę poniżej?

Link do strony: http://lubelskielotnisko.pl/DEV/main.html

Kody jakich użyłem:

HTML:
<ol id="menu">
<li><a href="#">Aktualności</a>
<ul>
<li><a href="#">Informacje</a></li>
<li><a href="#">Promocje</a></li>
</ul>
</li>
<li><a href="#">Dla Pasażera</a>
<ul>
<li><a href="#">Poradnik</a></li>
<li><a href="#">Rozkład lotów</a></li>
<li><a href="#">Dojazd do lotniska</a></li>
<li><a href="#">Przed odlotem</a></li>
<li><a href="#">Prawa pasażera</a></li>
</ul>
</li>
<li><a href="#">Lotnisko</a>
<ul>
<li><a href="#">Historia</a></li>
<li><a href="#">Dane techniczne</a></li>
<li><a href="#">Statystyki</a></li>
<li><a href="#">Terminal</a></li>
<li><a href="#">Wirtualny spacer</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a>
<ul>
<li><a href="http://lubelskielotnisko.pl/DEV/contact.html">Wyślij wiadomość</a></li>
<li><a href="#">O nas</a></li>
</ul>
</li>
</ol>


CSS:
#menu {
width:1000px;
margin:0 auto;
padding:0;
list-style-type:none;
background-color:#FDF;
}

/* naprawa wysokości elementu - ol */
#menu:after {
content:'';
display:block;
clear:both;
}

/* wygląd elementów - li */
#menu > li {
float:left;
}

/* pierwszy element - li - elementu o identyfikatorze menu */
#menu > li:first-child {
background-color:red;
width:25%;
}

/* drugi element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li {
background-color:green;
width:25%;
}

/* trzeci element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li + li {
background-color:blue;
width:25%;
}
/* czwarty element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li + li + li {
background-color:blue;
width:25%;
}

/* wygląd elementów - a */
#menu > li > a {
display:block;
padding:15px;
text-decoration:none;
text-align:center;
color:#000;
background-color:#DDD;
box-shadow:0 0 0 1px #FFF inset;
background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
}

/* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
#menu > li:hover > a {
color:#00F;
background-color:#FFF;
background-image:none;
}

/* -------------------- ROZWIJANA CZĘŚĆ MENU CSS -------------------- */
/* wygląd elementów - li - rodzica każdej części rozwijanej menu CSS */
#menu > li {
position:relative;
}

/* wygląd elementów - ul */
#menu > li > ul {
width:100%;
visibility:hidden;
position:absolute;
z-index:1;
margin:0;
padding:0;
list-style-type:none;
background-color:#FFF;
}

/* wygląd elementów - ul - po najechaniu kursorem myszki na element - li */
#menu > li:hover > ul {
visibility:visible;
}

/* wygląd elementów - li */
#menu > li > ul > li {
box-shadow:0 -4px 4px -4px #AAA;
}

/* wygląd pierwszego dziecka elementu typu - li */
#menu > li > ul > li:first-child {
box-shadow:none;
}

/* wygląd ostatniego dziecka elementu typu - li */
#menu > li > ul > li:last-child {
box-shadow:0 -4px 4px -4px #AAA, 0 4px 4px -4px #AAA;
}

/* wygląd elementów - a */
#menu > li > ul > li > a {
display:block;
text-decoration:none;
padding:15px;
color:#000;
}

/* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
#menu > li > ul > li:hover > a {
color:#00F;
background-color:#F0F0F0;
background-image:linear-gradient(#FFF, #EEE, #FFF);
}

/* --------------- ANIMOWANIE ROZWIJANEJ CZĘŚCI MENU CSS --------------- */
/* wygląd elementów - ul */
#menu > li > ul {
transform:scaleY(0);
-webkit-transform:scaleY(0);
transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transition:50ms;
}

/* wygląd elementów - ul - po najechaniu kursorem myszki na element - li */
#menu > li:hover > ul {
transform:scaleY(1);
-webkit-transform:scaleY(1);
}


Z góry dziękuję za pomoc.
p747
Posty: 1
Dołączył(a): 09.04.2017

Re: Menu nachodzi na tabelę

Post 09.04.2017, 22:08:19

Czy dzieje się to tylko w konkretnej przeglądarce? U mnie w Firefoxie i Safari wszystko wygląda OK, chyba, że mamy inne rozumienie pojęcia "nachodzić".
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19549
Dołączył(a): 14.04.2002


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50186 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935199 wiadomości
  • w 246385 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)