Test 2: Różnice pomiędzy wersjami
Przejdź do nawigacji
Przejdź do wyszukiwania
| Linia 1: | Linia 1: | ||
<html> | <html> | ||
<head> | <head> | ||
| − | |||
<style> | <style> | ||
/* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */ | /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */ | ||
/* wygląd głównego elementu - ol */ | /* wygląd głównego elementu - ol */ | ||
| − | ol { | + | ol.MenuRozwijane { |
list-style-type:none; | list-style-type:none; | ||
padding:0; | padding:0; | ||
margin:0; | margin:0; | ||
text-align:right; | text-align:right; | ||
| − | |||
| − | |||
/*font-size:18px; | /*font-size:18px; | ||
height:2em; | height:2em; | ||
| Linia 19: | Linia 16: | ||
/* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */ | /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */ | ||
| − | ol a { | + | ol.MenuRozwijane a { |
display:block; | display:block; | ||
text-decoration:none; | text-decoration:none; | ||
| Linia 26: | Linia 23: | ||
/* wygląd elementów - li - wszystkich dzieci elementu - ol */ | /* wygląd elementów - li - wszystkich dzieci elementu - ol */ | ||
| − | ol > li { | + | ol.MenuRozwijane > li { |
| + | font-weight: bold; | ||
float:left; | float:left; | ||
| − | + | margin-right:1px; | |
| − | margin- | + | /*width: 100%; |
| − | /*height:2em;*/ | + | height:2em;*/ |
} | } | ||
/* wygląd elementu - li - pierwszego dziecka elementu - ol */ | /* wygląd elementu - li - pierwszego dziecka elementu - ol */ | ||
| − | ol > li:first-child { | + | ol.MenuRozwijane > li:first-child { |
| − | margin-left:0; | + | /*margin-left:0;*/ |
} | } | ||
/* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */ | /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */ | ||
| − | ol > li:hover { | + | ol.MenuRozwijane > li:hover { |
background-color:#EEE; | background-color:#EEE; | ||
} | } | ||
/* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */ | /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */ | ||
| − | ol > li:hover > a { | + | ol.MenuRozwijane > li:hover > a { |
color:#09C; | color:#09C; | ||
} | } | ||
/* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */ | /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */ | ||
| − | ol > li:hover > ul { | + | ol.MenuRozwijane > li:hover > ul { |
list-style-type:none; | list-style-type:none; | ||
padding:0; | padding:0; | ||
| Linia 59: | Linia 57: | ||
/* wygląd głównych rozwijanych elementów - ul */ | /* wygląd głównych rozwijanych elementów - ul */ | ||
| − | ol > li > ul { | + | ol.MenuRozwijane > li > ul { |
display:none; | display:none; | ||
list-style-type:none; | list-style-type:none; | ||
| Linia 66: | Linia 64: | ||
} | } | ||
| − | /* wygląd elementu - li - w części | + | /* wygląd elementu - li - w części MenuRozwijanej */ |
| − | ol > li > ul > li { | + | ol.MenuRozwijane > li > ul > li { |
position:relative; | position:relative; | ||
background-color:#EEE; | background-color:#EEE; | ||
} | } | ||
| − | /* wygląd elementu - a - w części | + | /* wygląd elementu - a - w części MenuRozwijanej */ |
| − | ol > li > ul > li > a { | + | ol.MenuRozwijane > li > ul > li > a { |
border-top:1px solid #FFF; | border-top:1px solid #FFF; | ||
} | } | ||
| − | /* wygląd elementu - li - w części | + | /* wygląd elementu - li - w części MenuRozwijanej, po najechaniu kursorem myszki na dany element - li */ |
| − | ol > li > ul > li:hover { | + | ol.MenuRozwijane > li > ul > li:hover { |
background-color:#DDD; | background-color:#DDD; | ||
} | } | ||
| − | /* wygląd elementu - a - w części | + | /* wygląd elementu - a - w części MenuRozwijanej, po najechaniu kursorem myszki na element - li */ |
| − | ol > li > ul > li:hover > a { | + | ol.MenuRozwijane > li > ul > li:hover > a { |
color:#09C; | color:#09C; | ||
} | } | ||
</style> | </style> | ||
| − | |||
</head> | </head> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
| Linia 134: | Linia 97: | ||
<html> | <html> | ||
<body> | <body> | ||
| − | <ol> | + | <ol class="MenuRozwijane"> |
| − | <li><a href=" | + | <li style="width:100px"><a href="https://pokelife.pl/pokedex/index.php?title=Rotom">#479 Rotom</a> |
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="https://pokelife.pl/pokedex/index.php?title=Rotom_B">#479 Rotom B</a></li> |
| − | <li><a href=" | + | <li><a href="https://pokelife.pl/pokedex/index.php?title=Rotom_C">#479 Rotom C</a></li> |
| − | <li><a href=" | + | <li><a href="https://pokelife.pl/pokedex/index.php?title=Rotom_D">#479 Rotom D</a></li> |
| − | <li><a href=" | + | <li><a href="https://pokelife.pl/pokedex/index.php?title=Rotom_E">#479 Rotom E</a></li> |
| − | <li><a href=" | + | <li><a href="https://pokelife.pl/pokedex/index.php?title=Rotom_F">#479 Rotom F</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
