How can I add items in this menu?

For example, to open 3, 4 point when you hover the mouse. What properties you need to register in CSS and where to add points.

<ul> <li class='active'><a href='index.html'><span>Квартиры</span></a></li> <li><a href='#'><span>Новостройки</span></a></li> <li><a href='#'><span>Нежилые помещения</span></a></li> <li class='last'><a href='#'><span>Дома и коттеджи</span></a></li> </ul>

1 answer 1

On the Internet, therefore, the issue of materials is a huge amount. For example: http://jsfiddle.net/XGzmh/

 /*Обнуляем отступы*/ ul, li { margin:0; padding:0; list-style-type:none; } /*Задаём параметры блока, содержащего основное меню*/ #menu { display:block; position:absolute; top:100px; left:50px; } /*Задаём стили для разделов нашего меню*/ #menu > li { display:inline-block; height:20px; position:relative; } /*Стили для скрытого выпадающего меню*/ #menu > li > ul { position:absolute; top:20px; display:none; } /*Делаем скрытую часть видимой*/ #menu > li:hover > ul { display:block; } 
  <ul id="menu"> <li><a href="#">Раздел1</a></li> <li><a href="#">Раздел2</a> <ul> <li><a href="#">Подраздел1</a></li> <li><a href="#">Подраздел2</a></li> <li><a href="#">Подраздел3</a></li> </ul> </li> <li><a href="#">Разде3</a> <ul> <li><a href="#">Подраздел1</a></li> <li><a href="#">Подраздел2</a></li> <li><a href="#">Подраздел3</a></li> <li><a href="#">Подраздел4</a></li> <li><a href="#">Подраздел5</a></li> <li><a href="#">Подраздел6</a></li> <li><a href="#">Подраздел7</a></li> </ul> </li> </ul>