Ниспадающее меню для ссылки
- Автор темы SeDAN
- Дата начала
- Статус
- Закрыто для дальнейших ответов.
[codebox]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"значит есть ссылочка. необходимо к этой ссылочке каким-то образом примастить ниспадающее меню, состоящее из двух ссылок. как это можно реализовать?
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pop-up menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
.top {position: static; text-align:left; width: 61px; height:20px}
.sub {position:absolute; text-align:center; visibility: hidden; border-width:1px; border-style: solid; color:#000000; background-color:#FF9900}
a.submn {background-color: #0099FF; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px;}
a:hover.submn {background-color: #00CCFF; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px;}
a:active.submn {background-color: #0000FF; color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px;}
a.menu {background-color: #0099FF; color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 1px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px;
margin: 1px; border-width: 2px; border-style: solid; border-top-color: #00CCFF; border-right-color: #0066FF;
border-bottom-color: #0066FF; border-left-color: #00CCFF;}
a:hover.menu {background-color: #0099FF; color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 1px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px;
margin: 1px; border-width: 2px; border-style: solid; border-top-color: #0066FF; border-right-color: #00CCFF;
border-bottom-color: #00CCFF; border-left-color: #0066FF;}
a:active.menu {background-color: #0000FF; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 11px; padding-top: 1px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px;
margin: 1px; border-width: 3px; border-style: solid; border-top-color: #0066FF; border-right-color: #00CCFF;
border-bottom-color: #00CCFF; border-left-color: #0066FF;}
td {width: 56px; background-color:#FF9900;}
-->
</style>
<script language="javascript">
<!--//
function cl()
{ for(var i=1; i<=5; i++)
{eval('sub'+i+'.style.visibility="hidden"')}
}
function show(num)
{cl();
eval('sub'+num+'.style.visibility="visible"');
}
//-->
</SCRIPT>
<noscript>
Ваш браузер не поддерживает JavaScript
</noscript>
</head>
<body>
<div id="top" class="top" onMouseOver="show('1')" >
<a href="page1.php" class="menu">Пункт 1</a>
</div>
<div id="sub1" class="sub" style="left:70px; top:10px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('1')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('1')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('1')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('2')">
<a href="page2.php" class="menu">Пункт 2</a>
</div>
<div id="sub2" class="sub" style="left:70px; top:30px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('2')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('2')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('2')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('3')">
<a href="page3.php" class="menu">Пункт 3</a>
</div>
<div id="sub3" class="sub" style="left:70px; top:50px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('3')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('3')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('3')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('4')">
<a href="page4.php" class="menu">Пункт 4</a>
</div>
<div id="sub4" class="sub" style="left:70px; top:70px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('4')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('4')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('4')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('5')">
<a href="page5.php" class="menu">Пункт 5</a>
</div>
<div id="sub5" class="sub" style="left:70px; top:90px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('5')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('5')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('5')">Подпункт 3</a><br />
</div>
</body>
</html>
[/codebox]
- Статус
- Закрыто для дальнейших ответов.
Онлайн статистика
- Пользователи онлайн
- 1
- Гости онлайн
- 74
- Всего посетителей
- 75
Общее число может включать скрытых пользователей.
