Tworzenie arkusza stylów

Jeśli chcesz, aby menu przechodziło w samodzielny plik HTML, musisz zrobić spację pomiędzy tagami i miejscem, w którym będzie działał kod CSS. Wpisz następujące informacje w swoim pliku.

Przestrzeń między tymi dwiema etykietami to twój arkusz stylów. Jeśli korzystasz z oddzielnego pliku CSS, dodaj poniższe gdzieś w tagach "head":

Następnie utwórz plik o nazwie "style.css", który będzie twoim arkuszem stylów. Zachowaj arkusz stylów w tym samym katalogu, co główny plik HTML.

Tworzenie menu

Musisz utworzyć etykietę zawierającą menu, które można w nich umieścić. Dodaj następujące elementy do strony HTML w miejscu, w którym chcesz menu:

Następnie musisz zdefiniować dzielnik menu. Dodaj następujący kod do swojego arkusza stylów:

menu {

szerokość: 200px; }

Dodaj do tego wpisu dowolny inny styl CSS, który ma dzielnik; na przykład kolor tła, obramowania lub inny rozmiar.

Znaczniki HTML

Dodaj kod do menu. Menu użyje nieuporządkowanej listy:

, Dodaj następujący kod między etykietami dla swojego menu.
• Pozycja menu 1
  • Podmenu Element 1
  • Podmenu Element 2

Zwróć uwagę, że etykiety

podmenu znajdują się między etykietami
• i
dla "Element 1 menu". To informuje przeglądarkę, że podmenu znajduje się poniżej tego elementu menu. Dostosuj powyższy kod do własnego menu, dodając w razie potrzeby własne adresy URL i dodatkowe podmenu

Styl CSS

W tym momencie pojawi się menu, ale podmenu będzie zawsze wyświetlane. Aby ukryć i wyświetlić podmenu, wystarczy użyć atrybutu "display". Dodaj do swojego arkusza stylów:

menu li {position: relative;}

menu ul ul {

pozycja: absolutna; top: 0; lewo: 100%; szerokość: 100 pikseli; } div # menu ul ul {display: none;} div # menu ul li: hover ul {display: block;}

Zapisz wszystkie pliki. Twoje menu rozwijane jest gotowe.

Referencje

• Tanfa.co.uk: Samouczek menu podręcznego CSS (samouczek w menu rozwijanym CSS)

Więcej artykułów

• Jak utworzyć horyzontalne menu rozwijane w HTML
• Jak usunąć wszystkie style CSS dla pojedynczego DIV
• Jak zmniejszyć przestrzeń między wierszami w HTML
• Jak wstawić dwa obrazy poziomo za pomocą HTML
• Jak zastąpić CSS w klasach DIV
• Jak zakotwiczyć DIV u dołu strony
• Jak utworzyć pionową linię, która oddziela tekst HTML od obrazu