Css dropdown menü Chrome'da düzgün çalışmıyor...

Css dropdown menü Chrome'da düzgün çalışmıyor

Bu soru iptal edilmiştir...

İyi günler, siteme bir css dropdown menü ekledim, firefoxda gayet düzgün çalışıyor olmasına rağmen chrome'da menüler açılmıyor.

Css dosyası şu şekilde;

ul.ldd_menu{
	margin:0px;
	padding:0;
	display:inline-block;
	height:50px;
	background-color:#D04528 transparent;
	list-style:none;
	font-family:"Trebuchet MS", sans-serif;
	border-top:1px solid #ef593b transparent;
	border-bottom:1px solid #ef593b transparent;
	border-left:10px solid #D04528 transparent;
	-moz-box-shadow:0px 3px 4px #591E12;
	-webkit-box-shadow:0px 3px 4px #591E12;
	-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
	text-decoration:none;
}
ul.ldd_menu > li{
	float:left;
	position:relative;
}
ul.ldd_menu > li > span{
	float:left;
	color:#fff;
	background-color:#D04528 transparent;
	height:50px;
	line-height:50px;
	cursor:default;
	padding:0px 20px;
	text-shadow:0px 0px 1px #fff;
	border-right:1px solid #df7b61 transparent;
	border-left:1px solid #c44d37 transparent;
}
ul.ldd_menu .ldd_submenu{
	position:absolute; z-index:2;
	top:50px;
	width:550px;
	margin: 0;
    padding: 0;
	display:none;
	opacity:0.95;
	left:0px;
	font-size:10px;
	background: #C34328;
	border-top:1px solid #ef593b transparent;
	-moz-box-shadow:0px 3px 4px #591E12 inset;
	-webkit-box-shadow:0px 3px 4px #591E12 inset;
	-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
	background-color:#f0f0f0;
	color:#444;
	display:block;
	clear:both;
	padding:15px 20px;
	text-transform:uppercase;
	font-family: Arial, serif;
	font-size:12px;
	text-shadow:0px 0px 1px #fff;
	-moz-box-shadow:0px 0px 2px #777 inset;
	-webkit-box-shadow:0px 0px 2px #777 inset;
	-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
	list-style:none;
	float:left;
	border-left:1px solid #df7b61 transparent;
	margin:20px 0px 10px 30px;
	padding:10px;
}
li.ldd_heading{
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color:#FFB39F;
	text-shadow:0px 0px 1px #B03E23;
	padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
	font-family: Arial, serif;
	font-size:10px;
	line-height:20px;
	color:#fff;
	padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
	-moz-box-shadow:0px 0px 2px #333;
	-webkit-box-shadow:0px 0px 2px #333;
	box-shadow:0px 0px 2px #333;
	background:#AF412B;
}

Menü'nün Kodları is şunlar;

<div class="menu1"> 
    <div class="menu"> 
			<ul id="ldd_menu" class="ldd_menu">
				<li>
					<span>ANASAYFA</span><!-- Increases to 510px in width-->
					<div class="ldd_submenu">
						<ul>
							<li class="ldd_heading">By Location</li>
							<li><a href="#">South America</a></li>
							<li><a href="#">Antartica</a></li>
							<li><a href="#">Africa</a></li>
							<li><a href="#">Asia and Australia</a></li>
							<li><a href="#">Europe</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">By Category</li>
							<li><a href="#">Sun Beach</a></li>
							<li><a href="#">Adventure</a></li>
							<li><a href="#">Science  Education</a></li>
							<li><a href="#">Extreme Sports</a></li>
							<li><a href="#">Relaxing</a></li>
							<li><a href="#">Spa and Wellness</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">By Theme</li>
							<li><a href="#">Paradise Islands</a></li>
							<li><a href="#">Cruises  Boat Trips</a></li>
							<li><a href="#">Wild Animals  Safaris</a></li>
							<li><a href="#">Nature Pure</a></li>
							<li><a href="#">Helping others  For Hope</a></li>
							<li><a href="#">Diving</a></li>
						</ul>
						<a class="ldd_subfoot" href="#"> + New Deals</a>
					</div>
				</li>
				<li>
					<span>TEST</span>
					<div class="ldd_submenu">
						<ul>
							<li class="ldd_heading">By Location</li>
							<li><a href="#">South America</a></li>
							<li><a href="#">Antartica</a></li>
							<li><a href="#">Africa</a></li>
							<li><a href="#">Asia and Australia</a></li>
							<li><a href="#">Europe</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">By Category</li>
							<li><a href="#">Sun  Beach</a></li>
							<li><a href="#">Adventure</a></li>
							<li><a href="#">Science  Education</a></li>
							<li><a href="#">Extreme Sports</a></li>
							<li><a href="#">Relaxing</a></li>
							<li><a href="#">Spa and Wellness</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">By Theme</li>
							<li><a href="#">Paradise Islands</a></li>
							<li><a href="#">Cruises  Boat Trips</a></li>
							<li><a href="#">Wild Animals  Safaris</a></li>
							<li><a href="#">Nature Pure</a></li>
							<li><a href="#">Helping others  For Hope</a></li>
							<li><a href="#">Diving</a></li>
						</ul>
						<a class="ldd_subfoot" href="#"> + New Deals</a>
					</div>
				</li>
				<li>
					<span>PROJELER</span>
					<div class="ldd_submenu">
						<ul>
							<li class="ldd_heading">By Location</li>
							<li><a href="#">South America</a></li>
							<li><a href="#">Antartica</a></li>
							<li><a href="#">Africa</a></li>
							<li><a href="#">Asia and Australia</a></li>
							<li><a href="#">Europe</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">By Category</li>
							<li><a href="#">Sun  Beach</a></li>
							<li><a href="#">Adventure</a></li>
							<li><a href="#">Science  Education</a></li>
							<li><a href="#">Extreme Sports</a></li>
							<li><a href="#">Relaxing</a></li>
							<li><a href="#">Spa and Wellness</a></li>
						</ul>
						<ul>
							<li class="ldd_heading">By Theme</li>
							<li><a href="#">Paradise Islands</a></li>
							<li><a href="#">Cruises  Boat Trips</a></li>
							<li><a href="#">Wild Animals  Safaris</a></li>
							<li><a href="#">Nature Pure</a></li>
							<li><a href="#">Helping others  For Hope</a></li>
							<li><a href="#">Diving</a></li>
						</ul>
						<a class="ldd_subfoot" href="#"> + New Deals</a>
					</div>
				</li>
                <li>
					<span>ALTYAZILAR</span>
					</div>
				</li>
                
			</ul>
            </div>
            </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				 * the menu
				 */
				var $menu = $('#ldd_menu');
				
				/**
				 * for each list element,
				 * we show the submenu when hovering and
				 * expand the span element (title) to 510px
				 */
				$menu.children('li').each(function(){
					var $this = $(this);
					var $span = $this.children('span');
					$span.data('width',$span.width());
					
					$this.bind('mouseenter',function(){
						$menu.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':'300px'},300,function(){
							$this.find('.ldd_submenu').slideDown(300);
						});
					}).bind('mouseleave',function(){
						$this.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':$span.data('width')+'px'},300);
					});
				});
            });
        </script>

Saatlerdir uğraşıyorum fakat bir türlü çözemedim, yardımcı olursanız sevinirim.

Cevaplar

10 yıl önce yazılmış

ercet00ilk

96 cevap - 18 soru
kardeş o li açıp kapatıyorsun ya hani? işte o li leri aç ama kapatma o zaman düzelir. kolay gelsin.
- ercet00ilk
  <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <body> <script language="JavaScript"> $(function() { /** * the menu */ var $menu = $('#ldd_menu'); /** * for each list element, * we show the submenu when hovering and * expand the span element (title) to 510px */ $menu.children('li').each(function(){ var $this = $(this); var $span = $this.children('span'); $span.data('width',$span.width()); $this.bind('mouseenter',function(){ $menu.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':'300px'},300,function(){ $this.find('.ldd_submenu').slideDown(300); }); }).bind('mouseleave',function(){ $this.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':$span.data('width')+'px'},300); }); }); }); </script>
  
  şeklinde bir çağırsan?
  10 yıl önce yazılmış
- ercet00ilk
  <li><a href="#">Diving</a></li> taglarındaki </li> ile kapatma işini yapma. yaptığın sürece chrome tarayıcıda menü görmeyi unut :/
  
  10 yıl önce yazılmış 10 yıl önce güncellenmiş
- anqelus
  Değişen bir şey olmadı, eğer boş bir sayfaya sadece menüyü çağırırsam sorunsuz çalışıyor, menüyü phpbb3 forumda kullanmak istiyorum, aklıma gelen tek mantıklı cevap sorunun pbpbb'den kaynaklandığı...
  
  10 yıl önce yazılmış
- ercet00ilk
  sen de öyle yap? menüyü boş bir sayfaya çağır. esas çağıracan sayfada bir div içine de o menüyü çağırdığın boş sayfayı çağır?
  
  10 yıl önce yazılmış
- anqelus
  hmmm, inculude ederek mi? div içine çağırma yapmadım daha önce.
  
  10 yıl önce yazılmış
- ercet00ilk
  ya eğer öyle bir şey yapabilirsen. menüyü bir kez yaparsın her sayfada o menüyü çekersin. hem senin için büyük kolaylık olur. tekrar tekrar uğraşmazsın. :)
  
  10 yıl önce yazılmış
- anqelus
  Yaptım ve gariptirki sonuç olarak değişen hiçbir şey olmadı :/ Yine ff'da sorunsuz çalışıp chrome'a geçince duruyor. iframe ile çağırırsam chrom'da da çalışıyor ama menü altta kaldığı için işime yaramıyor.
  
  Bir de
  https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
  
  bu jqueryi çağırsam da çağırmasam da ff de menü çalışıyor... kafayı yemek üzereyim :)
  10 yıl önce yazılmış 10 yıl önce güncellenmiş
10 yıl önce yazılmış

tyhn

4 cevap - 2 soru

son menü olan ALTYAZILAR menüsünün bulunduğu li tagının için de </div> kapatma tagı var ama başlangıç tagı yok bundan kaynaklanıyor olabilir bunu düzelterek baktığımda sorunsuz tüm tarayıcılarda çalıştı kolay gelsin..
10 yıl önce yazılmış

anqelus

1 cevap - 2 soru

İkiside olmadı arkadaşlar, sorunun css'ten kaynaklandığını düşünüyorum.

anqelus

Css dropdown menü Chrome'da düzgün çalışmıyor

Cevaplar