Jump to content
  • 0

в ie выпадающее меню не находит на слайдер

itspider

Asked by itspider,

 Share

Question

itspider Explorer

itspider

Posted
Posted

Помогите разобраться.

В ie выпадающее меню отображается под слайдером. В остальных браузерах все работает. использовал z-index.

html


<header>
	 <div class="main">
		 <div class="volna">
		  <img src="img/travavoln2.png" alt="">		  
		   <div class="clear"></div>
		 </div>
		</div>

	<nav>
		 <ul class="menu">
			<li><a href="">Клуб</a>
			 <ul>
			  <li><a href="">О нас</a></li>
			  <li><a href="">Инфроструктура</a></li>
			  <li><a href="">Партнеры</a></li>
			  <li><a href="">Спонсоры</a></li>
			 </ul>
			</li>  
			<li><a href="">Услуги</a>
			 <ul>
			  <li><a href="">Подпункт 1</a></li>
			  <li><a href="">Подпункт 2</a></li>
			  <li><a href="">Подпункт 3</a></li>
			 </ul>
			</li>			
			<li><a href="">Конный спорт</a>
			 <ul>
			  <li><a href="">Выездка</a></li>
			  <li><a href="">Конкур</a></li>
			  <li><a href="">Соревнования</a></li>
			  <li><a href="">Результаты соревнований</a></li>
			 </ul>
			</li>  
			<li><a href="">СДЮШОР</a>
			 <ul>
			  <li><a href="">Обучение</a></li>
			  <li><a href="">Соревнования</a></li>
			  <li><a href="">Тренеры</a></li>
			  <li><a href="">Запись</a></li>
			 </ul>
			</li>  
			<li><a href="">Обучение</a>
			 <ul>
			  <li><a href="">Верховая езда</a></li>
			  <li><a href="">Индивидуальные занятия</a></li>
			  <li><a href="">Групповые занятия</a></li>
			  <li><a href="">Запись</a></li>
			 </ul>
			</li>  
			<li><a href="">Пони-клуб</a>
			 <ul>
			  <li><a href="">Обучение</a></li>
			  <li><a href="">Мероприятия</a></li>
			  <li><a href="">Катание</a></li>
			  <li><a href="">Запись</a></li>
			 </ul>
			</li>  
			<li><a href="">Иппотерапия</a></li>  
			<li><a href="">Отдых</a>
			 <ul>
			  <li><a href="">Подпункт 1</a></li>
			  <li><a href="">Подпункт 2</a></li>
			  <li><a href="">Подпункт 3</a></li>
			 </ul>
			</li>  
			<li><a href="">Галерея</a></li>
			<li><a href="">Контакты</a></li>
		</ul>

		<div class="clear"></div>
	 </nav>
	</header>
	 <div id="slide">
		<div class="slider">
			<ul class="items">
				<li><img src="images/slider-1.jpg" alt="" /><div class="banner"><p class="extra-wrap"><strong>Занятия верховой ездой</strong><span>Занятия по предворительной записи, телефон: +7 499 638 41 80, +7 906 700 50 84 Анна</span></p><a href="#">Подробнее</a></div></li>
				<li><img src="images/slider-2.jpg" alt="" /><div class="banner"><p class="extra-wrap"><strong>Заголовок</strong><span>Описание</span></p><a href="#">Подробнее</a></div></li>
				<li><img src="images/slider-3.jpg" alt="" /><div class="banner"><p class="extra-wrap"><strong>Заголовок</strong><span>Описание</span></p><a href="#">Подробнее</a></div></li>
			</ul>
		</div>
		<a href="#" class="prev"></a><a href="#" class="next"></a>
	 </div>

CSS

header {
width:100%;
margin:0 auto;
z-index:101;
/*background:url(../img/fonheader.png) 0 0 repeat-x;*/
background-color: #414f2a;
padding:0;
}
.main {
width:1264px;
margin:0 auto;
background-color: #414f2a;
height: 81px;
}
.volna {
z-index: 3;
position: relative;
}


nav {
width:1264px;
margin:0 auto;
z-index:4;
padding:5px 0px 5px 90px;
position: relative;
background-color: #414f2a;
background: #414f2a; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzk1Yjc1ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MTRmMmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #414f2a 0%, #414f2a 20%, #95b75f 50%, #414f2a 80%, #414f2a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#414f2a), color-stop(20%,#414f2a), color-stop(50%,#95b75f), color-stop(80%,#414f2a), color-stop(100%,#414f2a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* IE10+ */
background: linear-gradient(to right,  #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414f2a', endColorstr='#414f2a',GradientType=1 );
}


.menu li a, .menu li {
float: left;
}

.menu li {
list-style: none;
position: relative;
}
.menu li {
float:left;
line-height:24px;
margin:0px 28px 0px 4px;
}
.menu li a {
font-size:18px;
line-height:24px;
color:#fff;
text-transform:uppercase;
display:inline-block;
letter-spacing:-1px;
}
.menu li a:hover , .menu li.current a {
color:#ef6f53;
font-size: 20px;
}
.menu li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 10px 0 10px 10px;
margin: 0px;
}
.menu li:hover > ul {
display: block;
}
.menu li ul li, .menu li ul li a {
float: none;
}
.menu li ul li {
_display: inline;
}
.menu li ul li a {
display: block;
width: 300px;
}

/*——— slider ———*/
#slide {
position:relative;
width:1264px;
height:585px;
margin:0 auto;
padding:0px 0px 0 0px;
z-index:2;
background:#95b75f;
overflow:hidden;
}
.slider { width:1264px; height:465px; margin:0 auto; position:relative; z-index:2; overflow:visible !important; }
.items { display:none;}

.pagination { display:none;}
.pagination li {}
.pagination a { }
.pagination li.current a, .pagination li:hover a {}

.prev {position:absolute; top:504px ; left:90px; z-index:111; display:inline-block; width:22px; height:43px; background:url(../images/prev.gif) 0 0 no-repeat;}
.prev:hover {background-position:0 bottom;}
.next {position:absolute; top:504px ; right:90px; z-index:111; display:inline-block; width:22px; height:43px; background:url(../images/next.gif) 0 0 no-repeat;}
.next:hover {background-position:0 bottom;}

.banner{position:absolute; left:162px; top:465px; width:940px; background:#95b75f; overflow:hidden; padding:10px 0 0px 0;}
.banner p  {width:740px; float:left;}
.banner p strong {font-size:50px; line-height:60px; color:#fff; font-weight:normal; letter-spacing:-3px; display:block;}
.banner p span {font-size:18px; line-height:24px; color:#636f6f; font-weight:normal; letter-spacing:-1px; display:block; margin-top:-1px;}
.banner a {background:#ef6f53; color:#fff; font-size:26px; line-height:32px; padding:11px 24px 21px 24px; display:inline-block; float:right; margin-top:18px;}
.banner a:hover {background:#636f6f; }

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Vadimka Explorer

Vadimka

Posted
Posted

проблемы могут быть из за использования в стилях filter: , сталкивался с таким уже. не советую их использовать и ещё проверьте чтобы у всеч элементов с z-index было задано position

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept