Javascript-форум - Что то никак не пойму я логику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Что то никак не пойму я логику (https://javascript.ru/forum/misc/17356-chto-nikak-ne-pojjmu-ya-logiku.html)

Цитата:

Сообщение от IIIgun

ну я думаю итак понятно было.....

Тут дело не в понятии... Все должно быть четко проиллюстрировано. А то потом выяснится что есть еще какой-то фактор который ранее был не виден и всё такое...

Итого имеем вот такую страничку...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body{
	padding:0;
	margin:0;
	background: #efefef;
	text-align:center;}
#vse{
	margin:0 auto 0 auto;
	width:1000px;	background: #fff;
	position: relative;}

.menu {
	background: url('images/menu.jpg') #86a262 repeat-x;
	width: 100%;
	float: left;
}
.menu a {
	background: url('images/menu.jpg') #86a262 repeat-x;
	display: block;
	float: left;
	width: 165px;
	color: #ffffff;
	font-size: 20px;
	text-decoration: none;
	padding: 8px 0px 9px 0px;
	text-align: center;
}
.menu a:hover {
	background:#648040;
}
.sub_menu {
	background: #123;
	position: absolute;
	left: 0px; 
}
.sub_menu .sub {
	width: 200px;
	background: #ffffff;
	border: 1px solid #000;
	position: absolute;
}
.sub_menu  #news {
	display: none;
	float: left;
	left: 12px;
}
.sub_menu  #sport {
	display: none;
	float: left;
	left: 177px;
}
.sub_menu  #kult {
	display: none;
	float: left;
	left: 342px;
}
.sub_menu  #nauka {
	display: none;
	float: left;
	left: 507px;
}
.sub_menu  #nagr {
	display: none;
	float: left;
	left: 672px;
}
div.clear {
	clear: both;
}
</style>
<script type="text/javascript">
var bool=false;
function focus_menu (id) {
	document.getElementById(id).style.display='block';
}
function mokus_menu (id) {
	function vis()
	{ if(bool==false)document.getElementById(id).style.display='none'; alert("aaaaa");
	}
	setTimeout(vis,1000);	
}
function focus (id) {
	bool=true; alert("bbbb");
}
function mokus (id) {
	bool=false; document.getElementById(id).style.display='none';
}
</script>
</head>
<body>
<div id="vse">
	<div class="menu">
		<div style="padding: 0px 12px 0px 12px;">
			<a href="" onMouseOver="focus_menu('news');" onMouseOut="mokus_menu('news');">НОВОСТИ</a>
			<a href="" onmouseover="focus_menu('sport')" onmouseout="mokus_menu('sport')">СПОРТ</a>
			<a href="" onmouseover="focus_menu('kult')" onmouseout="mokus_menu('kult')">КУЛЬТУРА</a>
			<a href="" onmouseover="focus_menu('nauka')" onmouseout="mokus_menu('nauka')">НАУКА</a>
			<a href="" onmouseover="focus_menu('nagr')" onmouseout="mokus_menu('nagr')">НАГРАДЫ</a>
			<div class="clear" onfocus=""></div>
		</div>
	</div>
	<div class="clear"></div>
	<div class="sub_menu">
		<div id="news" class="sub" onMouseOver="focus('news');" onMouseOut="mokus('news');">
		<a href="">Основные новости</a><br>
		<a href="">Новости погоды</a><br>
		</div>
		<div id="sport" class="sub">
		2
		</div>
		<div id="kult" class="sub">
		3
		</div>
		<div id="nauka" class="sub">
		4
		</div>
		<div id="nagr" class="sub">
		5
		</div>
	</div>
</div>
</body>
</html>

Что теперь с этим делать? Чего смотреть? Чего не так?

Поскольку организация меню вовсе колхозная и всё желательно делать совсем не так... :) Есть списки... Вложеные списки... Вот ими и делаются такого рода менюшки.

Вот эта связка вообще убийственная

var bool=false;
...
if(bool==false)

Вот примерчик с меню/подменю...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
#menu > li {
	position: relative;
	float: left;
	margin-right: 10px;
}
#menu > li:hover .sub_menu {
	display: block;
}}
.sub_menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#">НОВОСТИ</a>
		<ul class='sub_menu'>
			<li><a href="#">Основные новости</a></li>
			<li><a href="#">Новости погоды</a></li>
		</ul>
	</li>
	<li><a href="#">СПОРТ</a></li>
	<li><a href="#">КУЛЬТУРА</a></li>
	<li><a href="#">НАУКА</a></li>
	<li><a href="#">НАГРАДЫ</a></li>
<ul>
</body>
</html>

Цитата:

Сообщение от ksa (Сообщение 104913)

по идее на сайте должно было быть одноуровневое меню, но потом захотелось двухуровневое, вот и на быструу руку добавил код, прост не эта цель перед мной стояла, разницы никакой нет в данном случае, сделаю я его вложенным или нет, дело в javascripte, проблемы я описал выше и на примере они видны, я хотел бы узнать отчего они возникли:write:

Цитата:

Сообщение от IIIgun

проблемы я описал выше и на примере они видны, я хотел бы узнать отчего они возникли

Из-за не верного подхода к хтмл-разметки...

Цитата:

Сообщение от ksa (Сообщение 105052)

Из-за не верного подхода к хтмл-разметки...

Изза этого не может быть, все ровно решение проблемы должно быть, какая разница будет меню одним цельным элементом или состоять из двух частей, можешь посчитать что мне нужно одно меню через другое, вот такая цель