Создал выплывающее меню, а оно почему-то не работает.

LazyBoy · 02.12.2010

Помогите пожалуйста. само меню нарезал в фотошопе. между картинок прогалов нет, но само меню не выпадает!!!
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Код</div></div><div class="sp-body"><div class="sp-content">
<pre><code class='html'><html>
<head>
<title>Компания Айрон | Главная Страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<LINK href="image/logo_mini.jpg" type=ico rel=icon>
<style>
body { font-family: verdana, sans-serif; font-size:13px; margin:0px; padding:0px; text-aglin:center;
background-image: url('images/фон.jpg');}
.menu { background-images: url('image/фон.jpg'); width:100%; }
#block_menu
.punkt {float:left; padding: 0px 0px 0px 0px; background:transparent; position:relative; cursor

ointer; text-align: center; }
.punkt div {padding:"none";}
div.list_punkts {background:#797950; position:absolute; top:26px; left:0px;
display:none; padding:0px; width:230px; border:solid 0px; }
div.list_punkts div.kont {padding:0px;margin:0px; /*background:#80FF00;*/ }
div.list_punkts a {text-decoration:none; padding:0px; cursor

ointer; color:#FFFFFF;}
div.list_punkts div a div.podpunkt { /*background:#AAAAAA;*/ width:100%; padding:0px; margin-top:0px; }
div.list_punkts div a div.podpunkt div { width:100%;padding:0px 0px 0px 0px; white-space

re;}
div.list_punkts div a:hover { background:#000000; }
div.list_punkts div a:hover div.podpunkt { background:#CCCCCC; color:#000000; }
.footer_menu { clear:both; }
</style>
</head>
<table id="________01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/UP_01.jpg" width="85" height="218" alt="">
</td>
<td>
<a href="index.html"><img src="images/UP_02.jpg" width="356" height="218" alt=""></a>
</td>
<td>
<a href="index.html"><img src="images/UP_03.jpg" width="196" height="218" alt=""></a>
</td>
<td>
<a href="contacts.html"><img src="images/UP_04.jpg" width="618" height="218" alt=""></a>
</td>
</tr>
</table>
<table id="________02" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/DOWN_01.jpg"></td>
<td>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_02.jpg" alt="Авто"></div
><div class="list_punkts"><div class="kont">
<a href="bag.html"><div class="podpunkt"><div>Экспедиционные багажники</div></div></a>
<a href="rams.html"><div class="podpunkt"><div>Сварка рам (для грузовых)</div></div></a>
<a href="box.html"><div class="podpunkt"><div>Инструментальные ящики<br/>(для грузовых)</div></div></a>
<a href="tent.html"><div class="podpunkt"><div>Каркасы под тент</div></div></a>
<a href="bamp.html"><div class="podpunkt"><div>Силовые бамперы</div></div></a>
</div></div>
</div>
</td>
<td>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_03.jpg" width="212" height="37" alt="Благоустройство территорий"></div
><div class="list_punkts"><div class="kont">
<a href="vorota.html"><div class="podpunkt"><div>Въездные ворота и калитки</div></div></a>
<a href="detsk.html"><div class="podpunkt"><div>Качели, детские площадки</div></div></a>
<a href="decor.html"><div class="podpunkt"><div>Декоротивные ограждения</div></div></a>
<a href="zabor.html"><div class="podpunkt"><div>Изготовление заборов</div></div></a>
<a href="flower.html"><div class="podpunkt"><div>Цветочницы</div></div></a>
<a href="scam.html"><div class="podpunkt"><div>Скамейки</div></div></a>
<a href="resh.html"><div class="podpunkt"><div>Решетки</div></div></a>
<a href="mang.html"><div class="podpunkt"><div>Мангалы</div></div></a>
<a href="bes.html"><div class="podpunkt"><div>Беседки</div></div></a>
<a href="tepl.html"><div class="podpunkt"><div>Теплицы</div></div></a>
<a href="naves.html"><div class="podpunkt"><div>Навесы</div></div></a>
<a href="urni.html"><div class="podpunkt"><div>Урны</div></div></a>
</div></div>
</div>
</td>
<td>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_04.jpg" width="225" height="37" alt="Интерьер, Мебель"></div
><div class="list_punkts"><div class="kont">
<a href="safe.html"><div class="podpunkt"><div>Металлические ящики (сейфы)</div></div></a>
<a href="mebel.html"><div class="podpunkt"><div>Металлокаркасы для мебели</div></div></a>
<a href="dver.html"><div class="podpunkt"><div>Входные двери</div></div></a>
<a href="lest.html"><div class="podpunkt"><div>Лестницы</div></div></a>
<a href="stelaj.html"><div class="podpunkt"><div>Стелажи</div></div></a>
<a href="stul.html"><div class="podpunkt"><div>Стулья</div></div></a>
<a href="petli.html"><div class="podpunkt"><div>Петли</div></div></a>
<a href="pechi.html"><div class="podpunkt"><div>Печи</div></div></a>
</div></div>
</div>
</td>
<td>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_05.jpg" width="152" height="37" alt="Нестандарт"></div
><div class="list_punkts"><div class="kont">
<a href="konv.html"><div class="podpunkt"><div>Ленточные конвейры</div></div></a>
<a href="proiz.html"><div class="podpunkt"><div>Производственные<br/>металлоконструкции</div></div></a>
<a href="oborud.html"><div class="podpunkt"><div>Вспомогательное<br/>оборудование</div></div></a>
<a href="bunk.html"><div class="podpunkt"><div>Бункеры</div></div></a>
<a href="mach.html"><div class="podpunkt"><div>Мачты</div></div></a>
</div></div>
</div>
</td>
<td>
<div class="menu">
<div id="block_menu">
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_06.jpg" width="242" height="37" alt="Обработка металла"></div
><div class="list_punkts"><div class="kont">
<a href="frezer.html"><div class="podpunkt"><div>Фрезерные работы</div></div></a>
<a href="tokar.html"><div class="podpunkt"><div>Токарные работы</div></div></a>
<a href="rubka.html"><div class="podpunkt"><div>Рубка металла</div></div></a>
</div></div>
</div>
</td>
<td>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_07.jpg" width="179" height="37" alt="Строительство"></div
><div class="list_punkts"><div class="kont">
<a href="opalub.html"><div class="podpunkt"><div>Изготовление сложных опалубок</div></div></a>
<a href="met-build.html"><div class="podpunkt"><div>Металлокаркасные строения</div></div></a>
<a href="zaklad.html"><div class="podpunkt"><div>Изготовление закладных</div></div></a>
<a href="mob.html"><div class="podpunkt"><div>Мобильные здания</div></div></a>
<a href="poyas.html"><div class="podpunkt"><div>Сварка арм.пояса</div></div></a>
<a href="garaj-vor.html"><div class="podpunkt"><div>Гаражные ворота</div></div></a>
<a href="groups.html"><div class="podpunkt"><div>Входные группы</div></div></a>
<a href="esto.html"><div class="podpunkt"><div>Эстокады</div></div></a>
<a href="garaj.html"><div class="podpunkt"><div>Гаражи</div></div></a>
</div></div>
</div>
</td>
<td>
<img src="images/DOWN_08.jpg" width="66" height="37" alt="">
</td>
</tr>
</table>
</div>
<div class="footer_menu"></div>
</div>
</body>
</html>[/CODE]

1ive · 02.12.2010

ну кто ж так делает)

Код рабочего меню..
[стили думаю в состоянии поправить?]

Без JavaScript, что лучше)

Код:

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

<style>
.menu{
font-family:arial, sans-serif;
width:212px;
height:100px;
position:relative;
font-size:11px;
z-index:100
}
.menu ul li a, .menu ul li a:visited{
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
background:#710069;
line-height:20px;
font-size:11px;
overflow:hidden
}
.menu ul{
padding:0;
margin:0;
list-style:none
}
.menu ul li{
float:left;
position:relative}
.menu ul li ul{
display:none
}
.menu ul li:hover a{
color:#fff;
background:#36f
}
.menu ul li:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li:hover ul li a:hover{
background:#6fc;
color:#000
}
</style>
</head>
<body>
<div class="menu">
<ul> 
<li><a class="hide" href="">Раздел 1</a>
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
</ul>
</li>

<li><a class="hide" href="">Раздел 2</a>
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
<li><a href="" title="">Страница 2.4</a></li>
<li><a href="" title="">Страница 2.5</a></li>
</ul>
</li>

</ul> 
</div>
</body>
</html>

LazyBoy · 02.12.2010

спасибо... раньше мой вариант тоже работал, но после того, как я сменил стили (я видимо что-то еще зацепил) перестало выезжать и всё!!!
СПАСИБО ЕЩЕ РАЗ ОГРОМНОЕ!!!

1ive · 02.12.2010

Так, для справки..
"спасибо" обычно лучше говорить используя плюсик в профиле))

LazyBoy · 03.12.2010

Буду знать!!

LazyBoy · 03.12.2010

Возможно, покажусь совсем тупым, но все-таки помогите с еще одним. код, с которым мне помог 1ive я переделал под свой сайт. Но каждая следующая пара разделов пишется под предыдущей. почему???
<pre><code class='html'><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<LINK href="images/logo_mini.jpg" type=ico rel=icon>
<style>
.menu{
font-family:arial, sans-serif;
width:212px;
height:100px;
position:relative;
font-size:11px;
z-index:100
}
.menu ul li a, .menu ul li a:visited{
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#000000;
border:0px solid #000000;
background:none;
line-height:20px;
font-size:11px;
overflow:hidden
}
.menu ul{
padding:0;
margin:0;
list-style:none
}
.menu ul li{
float:left;
position:relative}
.menu ul li ul{
display:none
}
.menu ul li:hover a{
color:#000000;
background:none
}
.menu ul li:hover ul{
display:block;
position:absolute;
top:20px;
left:0;
width:105px
}
.menu ul li:hover ul li a{
display:block;
background:#797950;
color:#000
}
.menu ul li:hover ul li a:hover{
background:#cccccc;
color:#000000
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="">Раздел 1</a>
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
</ul>
</li>

<li><a class="hide" href="">Раздел 2</a>
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
<li><a href="" title="">Страница 2.4</a></li>
<li><a href="" title="">Страница 2.5</a></li>
</ul>
</li>

<li><a class="hide" href="">Раздел 3</a>
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
</ul>
</li>

<li><a class="hide" href="">Раздел 4</a>
<ul>
<li><a href="" title="">Страница 4</a></li>
<li><a href="" title="">Страница 4.1</a></li>
<li><a href="" title="">Страница 4.2</a></li>
<li><a href="" title="">Страница 4.3</a></li>
<li><a href="" title="">Страница 4.4</a></li>
<li><a href="" title="">Страница 4.5</a></li>
</ul>
</li>

<li><a class="hide" href="">Раздел 5</a>
<ul>
<li><a href="" title="">Страница 5</a></li>
<li><a href="" title="">Страница 5.1</a></li>
<li><a href="" title="">Страница 5.2</a></li>
</ul>
</li>

<li><a class="hide" href="">Раздел 6</a>
<ul>
<li><a href="" title="">Страница 6</a></li>
<li><a href="" title="">Страница 6.1</a></li>
<li><a href="" title="">Страница 6.2</a></li>
<li><a href="" title="">Страница 6.3</a></li>
<li><a href="" title="">Страница 6.4</a></li>
<li><a href="" title="">Страница 6.5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>[/CODE]

1ive · 03.12.2010

Ответ в другой теме.
не завидую я тем, кому вы сайт делаете.

Все сервисы Codeby

Поиск

Поиск

Создал выплывающее меню, а оно почему-то не работает.

LazyBoy

Вложения

1ive

LazyBoy

1ive

LazyBoy

LazyBoy

1ive