Одно меню работает, второе, сделанное по аналогии, нет.

IgAlex

Новичок
5
0 / 0

Одно меню работает, второе, сделанное по аналогии, нет.

« : 06.09.2010, 15:47:48 »

есть выпадающее меню, но почему то не открывается при наведении
помогите найти где чего не хватает. Одно меню работает, второе по аналогии нет. рядом расположен рабочий пример (в одном коде)
вот код:

Код

<html>
<head>
<link rel="stylesheet" type="text/css" href="mysite.css">
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" class="top_menu">
	<tbody>
		<tr>
			<td>
				<div>
					<a href="#">Раздел 1</a></div>
				<div class="top_menu_sub">
					<div><a href="#">Раздел 1_1</a></div>
					<div><a href="#">Раздел 1_2</a></div>
					
			</td>
			<td>
				<div>
					<a href="#">Раздел 2</a></div>
				<div class="top_menu_sub">
					<div><a href="#">Раздел 2_1</a></div>
					<div><a href="#">Раздел 2_2</a></div>
					<div><a href="#">Раздел 3_3</a></div>
					
			</td>
		</tr>
	</tbody>
</table>
<ul> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
	<ul> 
	    <li><a href="#">History</a></li> 
	    <li><a href="#">Team</a></li> 
	    <li><a href="#">Offices</a></li> 
	</ul> 
 </li> 
 <li><a href="#">Services</a> 
	<ul> 
	    <li><a href="#">Web Design</a></li> 
	    <li><a href="#">Internet Marketing</a></li> 
	    <li><a href="#">Hosting</a></li> 
	    <li><a href="#">Domain Names</a></li> 
	    <li><a href="#">Broadband</a></li> 
	</ul> 
 </li>   
</ul> 
</body>
</html>

и сам CSS

Код

.top_menu { 
   width: 100%; 
}
.top_menu TD {                 
   width: 188px;                 
   cursor: pointer;
   position: relative;                 
   padding-top: 8px;                 
   padding-bottom: 8px;                 
   background-image: url(img/evr_menu_back.jpg);                 
   background-repeat: no-repeat;         
}
.top_menu_sub { 
   position: absolute; 
   left: 149px; 
   top: 0; 
   display: none; 
}
.top_menu A { 
   display: block;                
   color: white;                 
   font-weight: bold;                 
   font-size: 12px;                 
   text-decoration: none;                 
   margin-left: 21px;         
}
.top_menu_sub DIV:hover A { display: block; }  


ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }

ul li { position: relative; }

li ul { position: absolute; left: 149px; top: 0; display: none; }

ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } 

li:hover ul { display: block; }

« Последнее редактирование: 06.09.2010, 17:09:01 от IgAlex »

Записан

Russfox

Захожу иногда
169
34 / 0

Re: Одно меню работает, второе, сделанное по аналогии, нет.

« Ответ #1 : 07.09.2010, 23:59:19 »

Где же по аналогии то)

Код

<div><a href="#">Раздел 1</a></div>
<div class="top_menu_sub">
<div><a href="#">Раздел 1_1</a></div>
<div><a href="#">Раздел 1_2</a></div>

где див должен закрываться? надо

Код

<div><a href="#">Раздел 1</a>
<div class="top_menu_sub">
<div><a href="#">Раздел 1_1</a></div>
<div><a href="#">Раздел 1_2</a></div>
</div>

И что дает .top_menu_sub DIV:hover A { display: block; } когда .top_menu_sub {display: none; }.
.top_menu_sub DIV:hover A { display: block; } вобще не нужно, вместо этого .top_menu div:hover div.top_menu_sub { display: block; } . Класс top_menu_sub можно не указывать

Для первого дива нужно класс задать, например

Код

<div class="rel_menu"><a href="#">Раздел 1</a>
<div class="top_menu_sub">
<div><a href="#">Раздел 1_1</a></div>
<div><a href="#">Раздел 1_2</a></div>
</div>

Прописать для него .rel_menu {position:relative;}

А вобще если делать по аналогии - то делать лучше списками - так удобнее

Записан

IgAlex

Новичок
5
0 / 0

Re: Одно меню работает, второе, сделанное по аналогии, нет.

« Ответ #2 : 12.09.2010, 22:21:14 »

пытаюсь добавить горизонтальное меню, как то криво

Код

<table border="0" cellpadding="0" cellspacing="0" class="top_menu">
	<tbody>
		<tr>
			<td>
				<div><a href="#">О компании</a>
				<div class="top_menu_sub">
					<div><a href="#">О компании</a></div>
					<div><a href="#">Наши клиенты</a></div>
					<div><a href="#">Наши партнёры</a></div>
					<div><a href="#">Наши проекты</a></div>
					<div><a href="#">Контакты</a></div>
					<div><a href="#">Вакансии</a>
					<div class="top_menu_sub2">
						<div><a href="#">Вакансии1</a></div>
						<div><a href="#">Вакансии2</a></div>	
						<img border="0" class="top_menu_sub_line_right" src="img/evr_submenu_bottom.png" />
						</div></div>
					<img border="0" class="top_menu_sub_line" src="img/evr_submenu_bottom.png" /></div></div>
			</td>
			</tr>
    </tbody>
</table>

и стили

Код

.top_menu {                 
   width: 100%;                 
   position: relative;                 
   z-index: 10;         
}          
.top_menu TD {                 
   width: 188px;                 
   cursor: pointer;                 
   padding-top: 8px;                 
   padding-bottom: 8px;                 
   background-image: url(img/evr_menu_back.jpg);                 
   background-repeat: no-repeat;         
} 
.top_menu TD:hover {                 
   background-image: url(img/evr_menu_act.jpg);
      
}    
.top_menu DIV:hover div { display: block; } 
.top_menu tr td div {position:relative}
.top_menu A {                 
   color: white;                 
   font-weight: bold;                 
   font-size: 12px;                 
   text-decoration: none;                 
   margin-left: 20px;         
}          
.top_menu tr td div.top_menu_sub{position:absolute;top:12px;}
.top_menu_sub {                 
   position: absolute;                 
   z-index: 1999;                 
   display: none;
   padding-top:10px;         
}          
.top_menu_sub {left:0px}
.top_menu_sub {position:absolute}
.top_menu_sub DIV {                 
   width: 173px;                 
   cursor: pointer;                 
   padding: 8px 0px 8px 13px;                 
   border: 1px solid #ebebeb;                 
   border-top: none;                 
   background-color: white;         
} 
.top_menu_sub DIV:hover {
   display: block;             
   background-color: #f0f2f3;        
}          
.top_menu_sub IMG.top_menu_sub_line {                 
   display: block;                 
   cursor: default;                 
   padding: 0px;                 
   margin: 0px;                 
   border: none;         
}          
.top_menu_sub A {                 
   color: #0650b2;                 
   font-weight: normal;                 
   font-size: 12px;                 
   text-decoration: none;                 
   margin-left: 0px;         
}          
.top_menu_sub A.highlighted {                 
   color: #c80562;                 
   font-weight: bold;         
}


.top_menu_sub2 DIV {                 
   width: 173px;                 
   cursor: pointer;                 
   /*
padding: 8px 0px 8px 0px;
*/                 
   border: 1px solid #ebebeb;                 
   border-top: none;                 
   background-color: white;         
} 
.top_menu_sub2 {                 
   position: absolute;                 
   z-index: 20;                 
   display: none;
   left:173px;
   padding-top: 0px;         
}
.top_menu_sub2 IMG.top_menu_sub_line_right {                 
   display: block;                 
   cursor: default;                 
   padding: 0px;                 
   margin: 0px;                 
   border: none;         
}

Записан

danik.html

Живу я здесь
2650
353 / 4

Re: Одно меню работает, второе, сделанное по аналогии, нет.

« Ответ #3 : 12.09.2010, 22:41:52 »

а где ты такое меню нашел, которое генерит дивы? mod_mainmenu выдает чистый и самый удобный unordered list(ul). С ним сделать выпадашку - расплюнуть...

Записан

【Мегапак Virtuemart】:
• метатеги (description,keywords)
• заголовки (title)
• красивые алиасы (чпу) без тормозов и дублей!

IgAlex

Новичок
5
0 / 0

Re: Одно меню работает, второе, сделанное по аналогии, нет.

« Ответ #4 : 14.09.2010, 23:06:29 »

попросили на одном сайте меню доделать

сделал, если кому интересно будет, скину на мыло пример

Записан

Кликабельность псевдоэлемента в пункте меню Автор vasilii.pupkov	Ответов: 4 Просмотров: 3594	29.12.2021, 23:15:38 от v42bis
Выпадающее меню Автор DrShepard	Ответов: 10 Просмотров: 3033	20.10.2021, 12:36:16 от DrShepard
Как закруглить края выпадающего меню? Автор coliandra	Ответов: 1 Просмотров: 1507	11.12.2020, 21:15:57 от effrit
При прокрутке страницы виджет залезает на меню Автор coliandra	Ответов: 2 Просмотров: 1429	27.11.2020, 11:33:58 от coliandra
Как убрать маркер только из одного пункта меню. Автор kuraev64	Ответов: 2 Просмотров: 1677	20.07.2020, 11:18:44 от kuraev64

Одно меню работает, второе, сделанное по аналогии, нет. - Вопросы по CSS

Новости Joomla

Astroid обновился до версии 3.3.7!

Как тестировать Joomla PHP-разработчику? Компонент Patch tester.

Вышел релиз Revo PageBuilder Toolkit for YOOtheme Pro 1.6

IgAlex

Одно меню работает, второе, сделанное по аналогии, нет.

Russfox

Re: Одно меню работает, второе, сделанное по аналогии, нет.

IgAlex

Re: Одно меню работает, второе, сделанное по аналогии, нет.

danik.html

Re: Одно меню работает, второе, сделанное по аналогии, нет.

IgAlex

Re: Одно меню работает, второе, сделанное по аналогии, нет.

Похожие темы