Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
В этом сезоне среди программистов популярны красные рубашки под цвет глаз.

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Программисты на работе общаются двумя фразами: "непонятно" и "вроде работает".

  Моя группа в контакте:



Пример самого простого выпадающего меню на CSS

Файл index.html:
<!DOCTYPE html>
<html>
<head>
	<title>Меню</title>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mainmenu">
    <ul id="nav">
      <li><a href="">Меню 1</a> 
        <ul> 
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul> 
      </li>
      
      <li><a href="">Меню 2</a> 
        <ul> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
        </ul> 
      </li> 
     
      <li><a href="">Меню 3</a> 
        <ul> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
          <li><a href="#">Item 3</a></li> 
          <li><a href="#">Item 4</a></li> 
        </ul> 
      </li>
    </ul> 
</div>

</body>
</html>
посмотреть

Файл style.css:
#mainmenu
{
	float:left;
}
#mainmenu ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}
#mainmenu ul li
{
	position: relative;
	float:left;
}
#mainmenu ul li ul, #mainmenu ul li ul li
{
	width:130px;
}
#mainmenu li ul
{
	position: absolute;
	left: 0;
	top: 29px;
	display: none;
	float:left;
}
#mainmenu ul li a 
{
	float:left;
	color: black;
	width:130px;
	font-size:16px;
	padding: 5px 0 5px 0;
	text-align:center;
	background: #CCCCCC;
}
#mainmenu li ul li a
{
	padding:5px 0 3px 10px;
	text-align:left;
	font-size:12px;
	width:120px;
	background: #EEEEEE;
}
#mainmenu li ul li a:hover
{
	background: #152C36;
	color:White;
}
* html #mainmenu ul li { float: left; height: 1%; }
* html #mainmenu ul li a { height: 1%; }
#mainmenu li:hover ul, 
#mainmenu  li.over ul { display: block; }

Комментарии


Владимир
А можно узнать, что во что вставить? ничего не получается, как стили применить?
2015-01-07 08:13
Создайте два файла: "index.html" и "style.css", запись до точки это название файла, а после точки это тип файла, будьте внимательны! Далее, копируем все из первого окна с кодом и вставляем в файл "index", а то что во втором окне записываем в файл "style", сохраняем все, и открываем файл "index".
2015-01-08 18:03

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь