Выпадающее меню

23K

21 апреля 2011 года

106 / / 19.02.2011

Подскажите, пожалуйста. Мне необходимо, чтобы выпадающее меню находилось всегда в окне страницы (при открытии подменю лекции и лаб.работы). Что изменить в коде?

Свернуть исходник

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link href ="my.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="menu">

<ul class="menu">

    <li><a href="#">Лекции</a>

             <ul class="submenu">

                  <li><a href="#">Лекция №1</a></li>

                  <li><a href="#">Лекция №2</a></li>

                  <li><a href="#">Лекция №3</a></li>

             </ul>

    </li>

    <li><a href="#">Лабораторные работы</a>

             <ul class="submenu">

                  <li><a href="#">Лабораторная работа№1</a></li>

                  <li><a href="#">Лабораторная работа№2</li>

                  <li><a href="#">Лабораторная работа№3</a></li>

             </ul>

    </li>

    <li><a href="#">Справка</a></li>

    <li><a href="#"> Литература</a></li>

</ul>

</div>

</body>

</html>

Свернуть исходник

Код:

css;
/* CSS Document */
#menu {

    height: 43px;

    behavior: url(csshover.htc);

    background: #9ea8b2 url(images/mbg.gif) repeat-x;

    }
#menu ul, li {

    margin: 0px;

    padding: 0px;

    }

ul.menu {

    float: left;

    }
#menu ul.menu li {

    margin: 0px;

    float: left;

    width: 200px;

    height: 30px;

    display: block;

    padding-top: 13px;

    text-align: center;
}
#menu ul.menu li:hover {

    background: #5e717f url(images/mbgh.gif) repeat-x;

    }
#menu ul.menu li:hover ul.submenu {

    display: block;

    -margin-top: 30px;

    -margin-left: -141px;

    }
#menu ul.menu li ul.submenu {

    display: none;

    margin-top: 13px;

    position: absolute;

    background: #bcc4ce;

    }
#menu ul.menu li ul.submenu li {

    float: none;

    display: block;

    }
#menu ul.menu ul.submenu li:hover {

    background: #9ca6b0;

    }
#menu ul li a {

    color: #fff;

    font-size: 14px;

    text-decoration: none;

    }
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {

    color: #4f5458;

    font-size: 14px;

    text-decoration: none;}
#menu ul.submenu li a:hover {

    color: #152535;

    }