Създаване на листа стил

Ако искате менюто да отиде в самостоятелен HTML файл, трябва да направите интервал между маркерите и къде ще се извърши CSS кодът. Напишете следното във файла си.

Пространството между тези два етикета е стила ви. Ако използвате отделен CSS файл, добавете следното някъде в маркерите "head":

След това създайте файл, наречен "style.css", който ще ви бъде стилен лист. Съхранявайте стиловия лист в същата директория като главния HTML файл.

Създаване на менюто

Трябва да създадете етикет, който да съдържа менюто, за да влезе в него. Добавете следното към вашата HTML страница на мястото, където искате да отидете в менюто:

След това трябва да дефинирате разделителя на менюто. Добавете следния код към листа стил:

меню {

ширина: 200px; }

Добавете към този запис всеки друг стил на CSS, който искате делителят да има; например цвят на фона, граници или различен размер.

HTML маркиране

Добавете кода за менюто. Менюто ще използва неразреден списък:

, Добавете следния код между етикетите за менюто си.
• Елемент от менюто 1
  • Подменю Елемент 1
  • Подменю Елемент 2

Обърнете внимание на етикетите

от подменютата са между етикетите
• и
за "Елемент 1 на менюто". Това показва на браузъра, че подменюто се намира под този елемент от менюто. Адаптирайте горния код, за да представите вашето собствено меню, като добавите собствени URL адреси и допълнителни подменюта, ако е необходимо

CSS стил

В този момент ще се покаже менюто, но винаги ще се показва подменюто. Трябва само да използвате атрибута "показване", за да скриете и разкриете подменюто. Добавете следното към стиловия лист:

меню li {позиция: относително;}

меню ul ul {

позиция: абсолютно; горе: 0; ляво: 100%; ширина: 100px; } div # меню ul ul {дисплей: няма;} div # меню ul li: hover ul {дисплей: блок;}

Запазете всички файлове. Вашето падащо меню е готово.

препратки

• Tanfa.co.uk: CSS изскачащо меню за начинаещи (CSS падащо меню настойнически)

Още статии

• Как да направите хоризонтално падащо меню в HTML
• Как да премахнете всички стилове на CSS за отделен DIV
• Как да се намали пространството между редовете в HTML
• Как да вмъкнете две изображения хоризонтално с HTML
• Как да презапишете CSS в рамките на DIV класове
• Как да закрепите DIV в долната част на страницата
• Как да направите вертикална линия, която отделя HTML текст от изображение