Барин, пример у тебя конечно из серии "как делать не нужно"... Но вот вроде то, что ты хотел.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
/*Для всех контекстных меню*/
div.context_menu {
position:absolute;
padding-top:4px; padding-bottom:4px; padding-left:3px; padding-right:5px;
border: 1px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
background-color:#fcfcfc;
}
/*Стиль пунктов меню*/
div.context_menu div.not_hover {
font-size:12px; color:333333;
text-indent:8px;
height:12px;
cursor:default;
margin-left:2px;
}
div.context_menu div.hover {
font-size:12px; color:333333;
text-indent:8px;
height:12px;
cursor:default;
text-decoration:underline;
padding-left:2px;
}
/*Убрать подчёркивание стрелки*/
img.context_menu_bullet {
float:left;
padding-top:4px;
padding-left:1px;
}
.invisible {
display: none;
}
.item {
float:left;
text-decoration:underline;
cursor:default;
font-size:11px;
}
</style>
<script type="text/javascript">
function mark(Obj) {
Obj.className = 'hover';
}
/*Сделать не выделенным*/
function not_mark(Obj) {
Obj.className = 'not_hover';
}
/*Показывать если не виден, скрывать если виден*/
function show_hide(Obj) {
Obj.className=(document.getElementById(id).className=="")? 'invisible': ''
}
/*показать элемент, назначив ему определённный класс*/
function show2(id,classN) {
document.getElementById(id).className=classN;
}
/*Сарятать элемент*/
function hide(id) {
document.getElementById(id).className='invisible';
}
/*Из одного элемента вставить текст в другой*/
function move(id,Obj) {
document.getElementById(id).innerHTML = Obj.innerHTML;
Obj.parentNode.className='invisible'
}
</script>
</head>
<body>
<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
<div id='vibor2_menu_place' onmouseout="hide('vibor2_menu')">
<div id='vibor2_menu_current' onclick="show2('vibor2_menu','context_menu')" class='item' style=''>Выбор 1</div>
<img class='context_menu_bullet' src='bullet_mini_bottom.png'>
<div id='vibor2_menu' onmouseover=show2('vibor2_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
<div id='vibor2_menu_punkt_1' class='not_hover' onmouseover='mark(this)' onmouseout='not_mark(this)' onclick="move('vibor2_menu_current',this)">Выбор 1</div>
<div id='vibor2_menu_punkt_2' class='not_hover' onmouseover='mark(this)' onmouseout='not_mark(this)' onclick="move('vibor2_menu_current',this)">Выбор 2</div>
<div id='vibor2_menu_punkt_3' class='not_hover' onmouseover='mark(this)' onmouseout='not_mark(this)' onclick="move('vibor2_menu_current',this)">Выбор 3</div>
</div>
</div>
</div>
<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
<div id='vibor_menu_place' onmouseout="hide('vibor_menu')">
<div id='vibor_menu_current' onclick="show2('vibor_menu','context_menu')" class='item' style=''>Выбор 1</div>
<img class='context_menu_bullet' src='bullet_mini_bottom.png'>
<div id='vibor_menu' onmouseover=show2('vibor_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
<div id='vibor_menu_punkt_1' class='not_hover' onmouseover='mark(this)' onmouseout='not_mark(this)' onclick="move('vibor_menu_current',this)">Выбор 1</div>
<div id='vibor_menu_punkt_2' class='not_hover' onmouseover='mark(this)' onmouseout='not_mark(this)' onclick="move('vibor_menu_current',this)">Выбор 2</div>
<div id='vibor_menu_punkt_3' class='not_hover' onmouseover='mark(this)' onmouseout='not_mark(this)' onclick="move('vibor_menu_current',this)">Выбор 3</div>
</div>
</div>
</div>
</body>
</html>
В ИЕ7 не потестить конечно...
