Проблема с пересекающимися блоками

Serge · October 10, 2009

У меня проблема с соседними блоками на странице.

Для того, чтобы выпадающее меню разворачивалось на полную длину, я приписал ему padding-bottom: 60px;

#menu {
  background: transparent url('menu.png') repeat-x 100% 2px;
  width: 100%;
  height: 66px;
  margin: 0;
  padding-bottom: 60px;
  text-align: left;  
}

Теперь меню работает нормально, но на эти 60px опустился нижележащий блок.

Если поднять его при помощи отрицательного margin, то в IE6 нижние ссылки выпадающего меню, которые попадают на нижний блок - сворачиваются, не успеваешь подвести к ним курсор.

На всякий случай, вот стиль нижнего блока:

.container {	
  position: relative;
  float: left;
  text-align: left;
  width : 980px; 
  background: transparent;
  margin: 0 0 30px 0;
  padding: 10px 10px 0 10px;
  font-family: Arial, Helvetica, sans-serif;	
  font-size: 11px;
}

Пытался расположить эти блоки в разных плоскостях при помощи z-index - не помогло.

Помогите исправить этот баг, плиз...

Edited October 10, 2009 by Serge

Serge · October 10, 2009

Уже разобрался сам.

Serge · October 14, 2009

Это меню почему то не работает в IE 7 и IE8, но при этом прекрасно работает в IE6.

Вот его HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Выпадающее Меню </title>

<link rel="stylesheet" href="images/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="images/jquery.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
  jQuery("#menu ul").css({display: "none"}); // Opera Fix
  jQuery("#menu li").hover(function(){
		  jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
		  },function(){
		  jQuery(this).find('ul:first').css({visibility: "hidden"});
		  });
  });
</script>
</head>
<body>
<div id="navbar">
	<div id="top_menu">
	   <ul id="menu" style="display:inline;">
		  <li><a href="">Главная</a></li>	 
		  <li><a href="">Раздел 1</a>
				  <ul id="submenu" style="display: block; visibility: hidden;">
				   <li><a href="">Страница1</a></li>
				   <li><a href="">Страница2</a></li>
				   <li><a href="">Страница3</a></li>
				   <li><a href="">Страница4</a></li>
				   <li><a href="">Страница5</a></li>
				   <li><a href="">Страница6</a></li>
				  </ul>
		  </li>		 
		  <li><a href="">Раздел 2</a></li>		
		  <li><a href="">Раздел 3</a></li>		  
		  <li><a href="">Раздел 4</a></li>
	   </ul>
	</div>
</div>
</body>
</html>

CSS:

* { 
  margin : 0; 
  padding : 0; 
} 
#navbar { 
  background : #1291cd; 
  position: relative;
  margin : 100px auto 0; 
  color : #fff; 
  width : 926px; 
  height : 34px; 
  border-top : 1px solid #00a5e4; 
  border-bottom : 1px solid #0b75af; 
  text-align: left;
  z-index: 99;
} 
#top_menu {
  width : 926px; 
  height: 34px;
  background : transparent;	
  font-size: 14px;
  font-weight : bold; 
  font-family : Arial, Verdana, Sans-Serif; 
  color: #fff;
}
ul#menu, ul#menu li {  
  float: left;
  z-index: 100;
  list-style-type: none;
  background : transparent;	
}
ul#menu {
  width : 926px; 
}
ul#menu li {   
  position: relative;
  background : url('sep.gif') no-repeat; 
  width : 185px; 
  height : 34px; 
  text-align: center;
}
ul#menu li a:link, ul#menu li a:visited {  
  padding: 9px 0;
  color: #eee;
  text-decoration: none;
  background : transparent;	
  display: block;  
}
ul#menu li a:hover, ul#menu a:active {  
  padding: 9px 0;
  background: #06aeed;
  color: #fff;
  text-decoration: none;
  display: block;
}
ul#submenu  {
  position: absolute; 
  top: 35px; 
  left: 0;
  background: #eee;
  width: 200px;
  height: auto;
  margin: -1px 0 0 0;
  font-size: 14px;
  line-height: 1;
  color: #006da5;
  z-index: 99;
  border: 1px solid #ddd;  
}
ul#submenu li {	   
  float: left;
  width: 200px;
  height: auto;
  background : transparent;	
  color: #006da5;
  font-weight: normal;
  text-align: left;
  line-height: 1;
}
ul#submenu li a:link, ul#submenu li a:visited {  
  float: left;
  width: 180px;
  background : transparent;	
  padding: 9px 10px;
  color: #006da5;
  text-align: left;
  text-decoration: none; 
}
ul#submenu li a:hover, ul#submenu li a:active {  
  color: #fff;
  float: left;
  width: 180px;
  height: auto;
  background: #06aeed;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
}
ul#submenu img {
  border: 0;
  margin: 2px 5px -2px 0;
}

Это мое первое выпадающее меню, поэтому наверняка, где то сделал ошибку.

Пожалуйста, подскажите, что неправильно в коде. Почему оно не выпадает?

Sign In

Проблема с пересекающимися блоками

Question

Serge

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Serge

Link to comment

Share on other sites

Serge

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information