1. Главная страница » Как сделать...? » Пример самого простого выпадающего меню на CSS

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

Автор: | 06.01.2013

Файл 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="99%";
}
#mainmenu li ul
{
        position: absolute;
        left: 0;
        top: 29px;
        display: none;
        float:left;
}
#mainmenu ul li a 
{
        float:left;
        color: black;
        width="99%";
        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="99%";
        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; }

Читайте также:  Как просто открыть интернет-магазин

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

  1. Владимир

    Владимир А можно узнать, что во что вставить? ничего не получается, как стили применить?

  2. sasha

    sasha Создайте два файла: «index.html» и «style.css», запись до точки это название файла, а после точки это тип файла, будьте внимательны! Далее, копируем все из первого окна с кодом и вставляем в файл «index», а то что во втором окне записываем в файл «style», сохраняем все, и открываем файл «index».

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *