Собссна, вот оно...
Немного по-нубски сделано, но все с чего-то начинают
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
*
{
margin:0px;
padding:0px;
font-family:Verdana !important;
}
.clear1
{
clear:both;
}
.stepcontent
{
width:100%;
height:auto;
margin-top:35px;
font-size:13px;
}
.ulli1
{
display: none;
}
.ulli1 li
{
display: none;
}
.ulli2
{
width: 405px;
height:400px;
overflow:auto;
background-color: #f3f7fb;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
border-bottom: 1px solid #848484;
z-index: 2;
position: absolute;
}
.ulli2 li
{
width: 100%;
height: 68px;
list-style-type: none;
padding-bottom:5px;
}
.lioption1
{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 25px;
}
.lioption2
{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
background:#f3e3b2;
padding-left: 25px;
cursor:pointer;
}
span.liopn
{
font-size: 13px;
color:#0070c0;
}
span.liopi
{
font-size:13px;
color:#474747;
}
.inpa
{
cursor: pointer;
}
.inpa2
{
cursor: pointer;
border: 1px solid black;
width: 510px;
height: 30px;
position: absolute;
z-index: 3;
background: #ff0000;
}
.visp1
{
background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=806&stc=1&d=1305700943);
background-position: right center;
background-repeat: no-repeat;
color: #848484;
width: 400px;
border: 1px solid #848484;
height: 19px;
padding-top: 2px;
padding-left: 5px;
cursor: pointer;
background-color: #ffffff;
}
.visp2
{
background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=807&stc=1&d=1305700946);
background-position: right center;
background-repeat: no-repeat;
color: #848484;
width: 400px;
border: 1px solid #848484;
height: 19px;
padding-top: 2px;
padding-left: 5px;
cursor: pointer;
background-color: #ffffff;
}
.vibiz
{
float:left;
margin-top: 10px;
margin-left: 10px;
color:#000000;
font-size: 12px;
}
.vibkol
{
margin-top: 0px;
margin-left: 454px;
color:#000000;
font-size: 12px;
}
.minus
{
width:21px;
height:21px;
background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=802&stc=1&d=1305700930);
border: 1px solid #848484;
float:left;
cursor:pointer;
margin-left: 44px;
}
.plus
{
width:21px;
height:21px;
background-image: url(http://javascript.ru/forum/attachment.php?attachmentid=804&stc=1&d=1305700938);
border: 1px solid #848484;
float:left;
cursor:pointer;
margin-left: -1px;
}
.inpu1
{
border:1px solid #848484;
width:40px;
height:19px;
float:left;
text-align: center;
padding-top:2px;
margin-left: -1px;
}
span.vibrat1
{
margin-left: 38px;
cursor: pointer;
font-size: 16px;
color:#0070c0;
border-bottom: 1px dashed #0070c0;
}
</style>
<script type="text/javascript">
function spi(id)
{
if
( document.getElementById(id).className == 'visp1' )
{document.getElementById(id).className = 'visp2';}
else
{document.getElementById(id).className = 'visp1';}
}
function showlist(id)
{
if
(document.getElementById(id).className == 'ulli1')
{document.getElementById(id).className = 'ulli2';}
else
{document.getElementById(id).className = 'ulli1';}
}
function lightpt(id)
{document.getElementById(id).className = 'lioption2';}
function unlightpt(id)
{document.getElementById(id).className = 'lioption1';}
function clk(obj)
{
var q = document.getElementById('shifr1').innerHTML;
var w = document.getElementById('inpu');
w = q;
document.getElementById('inppa').innerHTML = " " + w + " ";
}
function al(id)
{
var q = document.getElementById('inppa').innerHTML;
var r = document.getElementsByName("inpu")[0].value;
if (document.getElementById('inppa').innerHTML == 'Курс')
{alert ("Выберите курс");}
else if
(r == 0)
{alert ("Невозможно создать 0 студентов!");}
else
{alert(" Вы выбрали "+ r +" студентов по курсу " + q + " ");}
}
function plus(id)
{
var q = document.getElementById('inpu');
if (q.value < 100)
{
s = q.value ++;
}
else
{
s = q.value;
}
}
function minus(id)
{
var q = document.getElementById('inpu');
if
(q.value > 1)
{s = q.value --;}
else
{s = q.value;}
}
</script>
</head>
<body>
<div class="stepcontent">
<div class="abks">
<div class="vipmenu">
<div class="inpa" onclick="spi('inppa'); showlist('ulli');">
<div class="visp1" id="inppa">Курс</div>
</div>
<div id="ulli" class="ulli1">
<ul>
<li>
<div class="lioption1" id="lio1" OnMouseover="lightpt('lio1')" OnMouseOut="unlightpt('lio1')" OnClick="spi('inppa'); showlist('ulli'); clk(this); ">
<span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span>
<br />
<span class="liopi">Стоимость</span>
<br />
<span class="liopi">Длительность</span>
</div>
</li>
<li>
<div class="lioption1" id="lio2" OnMouseover="lightpt('lio2')" OnMouseOut="unlightpt('lio2')" OnClick="spi('inppa'); showlist('ulli'); clk(this); ">
<span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span>
<br />
<span class="liopi">Стоимость</span>
<br />
<span class="liopi">Длительность</span>
</div>
</li>
<li>
<div class="lioption1" id="lio3" OnMouseover="lightpt('lio3')" OnMouseOut="unlightpt('lio3')" OnClick="spi('inppa'); showlist('ulli'); clk(this); ">
<span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span>
<br />
<span class="liopi">Стоимость</span>
<br />
<span class="liopi">Длительность</span>
</div>
</li>
<li>
<div class="lioption1" id="lio4" OnMouseover="lightpt('lio4')" OnMouseOut="unlightpt('lio4')" OnClick="spi('inppa'); showlist('ulli'); clk(this); ">
<span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span>
<br />
<span class="liopi">Стоимость</span>
<br />
<span class="liopi">Длительность</span>
</div>
</li>
<li>
<div class="lioption1" id="lio5" OnMouseover="lightpt('lio5')" OnMouseOut="unlightpt('lio5')" OnClick="spi('inppa'); showlist('ulli'); clk(this); ">
<span class="liopn"><b id="shifr1">Ключ</b>.<span id="name1">Наименование</span></span>
<br />
<span class="liopi">Стоимость</span>
<br />
<span class="liopi">Длительность</span>
</div>
</li>
</ul>
</div>
</div>
<br><br>
<div class="minus" OnClick="minus('inpu');" OnMouseDown="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=803&stc=1&d=1305700934)';" OnMouseUp="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=802&stc=1&d=1305700930)';"></div>
<input class="inpu1" id="inpu" name="inpu" type="text" value="1">
<div class="plus" OnClick="plus('inpu')" OnMouseDown="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=805&stc=1&d=1305700941)';" OnMouseUp="this.style.backgroundImage='url(http://javascript.ru/forum/attachment.php?attachmentid=804&stc=1&d=1305700938)';"></div>
<span class="vibrat1" OnClick="al(this)" OnMouseOver="this.style.border='none'" OnMouseOut="this.style.borderBottom='1px dashed #0070c0'">Выбрать</span>
<div class="clear1"></div>
</div>
<br /><br />
</div>
<div class="clear1"></div>
</body>
</html>