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.
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Cevaplar

  • ercet00ilk adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    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 adlı üyenin fotoğrafı 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?
      9 yıl önce yazılmış
    • ercet00ilk adlı üyenin fotoğrafı 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 :/
      9 yıl önce yazılmış 9 yıl önce güncellenmiş
    • anqelus adlı üyenin fotoğrafı 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ığı...
      9 yıl önce yazılmış
    • ercet00ilk adlı üyenin fotoğrafı 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?
      9 yıl önce yazılmış
    • anqelus adlı üyenin fotoğrafı anqelus
      hmmm, inculude ederek mi? div içine çağırma yapmadım daha önce.
      9 yıl önce yazılmış
    • ercet00ilk adlı üyenin fotoğrafı 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. :)
      9 yıl önce yazılmış
    • anqelus adlı üyenin fotoğrafı 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 :)
      9 yıl önce yazılmış 9 yıl önce güncellenmiş
  • tyhn adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    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..
  • anqelus adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    1 cevap - 2 soru
    İkiside olmadı arkadaşlar, sorunun css'ten kaynaklandığını düşünüyorum.