2009-12-16 86 views
1

當您將鼠標懸停在頂層鏈接上時,子菜單顯示爲應該顯示,但是當您將光標向下移動到子菜單上時,它會立即消失,有時會在第3或第4子菜單鏈接後消失,具體取決於您是! 它在firefox,ie7和ie8中正常工作,並驗證了css和xhtml的過渡。 請幫助我只是看不到問題。我曾嘗試將margin-top:-1px添加到子li和/或sub ul中,但無濟於事。Safari和Chrome中的CSS菜單問題。子菜單消失,除非你真的很快!

任何想法都感激不盡。哦,我應該說我正在使用Windows Vista,safari 4.0.4,並且網站用戶標記了問題,他使用的是Safari 3和Windows XP。

感謝

安妮

的html代碼:

<ul id="menu"> 
     <li id="menu1" ><a href="http://www.theservicebusiness.com/" title="Home">Home</a></li> 
<li id="menu15" class="active"><a href="/what-we-do.html" title="What we do">What we do</a><ul class="subm"><li class=" subli"> 
<a href="/what-is-lean-service.html" title="What is Lean Service">What is Lean Service</a> 

</li> 
<li class=" subli"> 
<a href="/performance-metrics.html" title="Performance Metrics">Performance Metrics</a> 

</li> 
<li class=" subli"> 
<a href="/service-network-lean.html" title="Designing the service network around Lean concepts">Service Network</a> 

</li> 
<li class=" subli"> 
<a href="/global-process.html" title="Global process">Global Process</a> 

</li> 
<li class=" subli"> 
<a href="/organisation.html" title="Organisation">Organisation</a> 

</li> 
<li class="last subli"> 
<a class="last" href="/technology-and-information.html" title="Technology and Information">Technology</a> 

</li> 
</ul></li> 
<li id="menu72" ><a href="/how-we-do-it.html" title="How we do it">How we do it</a><ul class="subm"><li class=" subli"> 
<a href="/discovery.html" title="Discovery">Discovery</a> 

</li> 
<li class=" subli"> 
<a href="/gain-share.html" title="Gain Share">Gain Share</a> 

</li> 
<li class="last subli"> 
<a class="last" href="/smart-sourcing.html" title="Smart Sourcing">Smart Sourcing</a> 

</li> 
</ul></li> 
<li id="menu54" ><a href="/clients.html" title="Clients">Clients</a><ul class="subm"><li class=" subli"> 
<a href="/testimonials.html" title="Testimonials">Testimonials</a> 

</li> 
<li class=" subli"> 
<a href="/defence.html" title="Defence industry case studies">Defence</a> 

</li> 
<li class=" subli"> 
<a href="/hi-tech.html" title="Hi-Tech">Hi-Tech</a> 

</li> 
<li class=" subli"> 
<a href="/Industrial.html" title="Industrial">Industrial</a> 

</li> 
<li class=" subli"> 
<a href="/telecom.html" title="Telecom">Telecom</a> 

</li> 
<li class=" subli"> 
<a href="/computing.html" title="Computing">Computing</a> 

</li> 
<li class=" subli"> 
<a href="/medical.html" title="Medical Sector">Medical</a> 

</li> 
<li class="last subli"> 
<a class="last" href="/rail.html" title="Rail">Rail</a> 

</li> 
</ul></li> 
<li id="menu33" ><a href="/about-us.html" title="About us">About Us</a><ul class="subm"><li class=" subli"> 
<a href="/director-bios.html" title="Director Bios">Director Bios</a> 

</li> 
<li class=" subli"> 
<a href="/ethical-and-social-responsibility.html" title="Ethical and social responsibility">Social Responsibility</a> 

</li> 
<li class="last subli"> 
<a class="last" href="/jobs.html" title="Job opportunities">Job Opportunities</a> 

</li> 
</ul></li> 
<li id="menu73" ><a href="/global-locations.html" title="Global Locations">Global Locations</a></li> 
<li id="menu6" ><a href="/contact-us.html" title="Contact Us">Contact us</a></li> 
<li id="menu2" class="last"><a href="/blog.html" title="Blog">Blog</a></li> 

    </ul> 

和CSS:

#head, #headint, #menu ul {z-index:100} 
#head h1, #headint h1 {z-index:0} 
#menu1 {z-index:99} 
#menu15 {z-index:98} 
#menu32 {z-index:97} 
#menu33 {z-index:96} 
#menu48 {z-index:95} 
#menu6 {z-index:94} 
#menu2 {z-index:93} 
#menu49 {z-index:92} 
#menu, #menu ul {padding: 0;margin: 0 auto; list-style: none; width: 940px; } 
#menu a {display: block;border:0; } 
#menu li { float: left;width: 100px; background:transparent ; margin-bottom:0; height: 50px;} 
#menu li a {text-align: center; padding-top: 37px; font-size: 13px; font-weight: bold;color: #C3C3C3; background: url(../images/bg_nav-00-divider.png) no-repeat ; background-position: 0 bottom} 
#menu li a:hover { color:#99ccff} 
li#menu72 ul.subm, li#menu15 ul.subm, li#menu54 ul.subm, li#menu33 ul.subm { position:relative; width: 196px; left: -999em; background:transparent url('../images/bg_subnav.png') no-repeat scroll 0 bottom;text-align:left } 
li#menu72 ul.subm li, li#menu15 ul.subm li, li#menu54 ul.subm li, li#menu33 ul.subm li { float:none; background:transparent; display:block; width:183px;text-align:left; height: 31px; } 
li#menu72 ul.subm li a, li#menu15 ul.subm li a, li#menu54 ul.subm li a, li#menu33 ul.subm li a { padding:15px 0 0 35px; background: transparent url('../images/menbul.png') no-repeat 5px bottom; text-align:left} 
li#menu72 ul.subm li.last a.last, li#menu15 ul.subm li.last a.last, li#menu54 ul.subm li.last a.last, li#menu33 ul.subm li.last a.last { padding:15px 0 25px 35px !important; background: transparent url('../images/menbul.png') no-repeat 5px 10px; } 
li#menu72 ul.subm li.last, li#menu15 ul.subm li.last, li#menu54 ul.subm li.last, li#menu33 ul.subm li.last { height:56px} 
#menu li:hover ul, #menu li.sfhover ul {left: auto ;} 
li#menu1{ width:253px;} 
li#menu1 a{ background: url('../images/logo.png') no-repeat 0px 0px; left: 0px; width: 253px; top: 5px; height: 50px;overflow: hidden; text-indent: -9999em; outline: none} 
#menu:hover li {background-position: 0 0;} 
li#menu49 a { color:#99ccff; font-weight:bold;font-size:13px} 
li#menu49 a:hover { color:#C3C3C3; } 
li#menu54{ width:90px;} 
li#menu33{ width:90px;} 
li#menu6{ width:90px;} 
li#menu2{ width:56px;} 
li#menu73{ width:130px;} 

回答

0

我發現問題...橫幅與菜單重疊。隨着你提供的代碼,我無法複製這個問題。但添加橫幅和適當的CSS後,我發現它重疊。

經過多次嘗試將整個事物往下移動(加入5 <br />的工作LOL)。我找到源,改變這一行,margin-bottom: 0margin-bottom: 5px

#menu li { float: left; width: 100px; background: transparent; margin-bottom: 5px; height: 50px;} 
+0

你是對的!謝謝......我真的不得不在現實生活中將它改爲6px才能使用,但非常感謝!在這樣做時,它突出顯示了ie7粘滯懸停錯誤,但我通過交換#menu修復了這個問題:將hover li移動到#menu li:hover – Anni 2009-12-16 16:31:18

0

我很難複製這個問題,但我想我有東西給你嘗試。

看來您正在使用相對定位來隱藏和顯示子菜單(從-999em移動到自動)。相反,我會嘗試使用:

li#menu72 ul.subm, li#menu15 ul.subm, li#menu54 ul.subm, li#menu33 ul.subm { visibility: hidden; } 

#menu li:hover ul, #menu li.sfhover ul { visibility: visible; } 

這樣,元素不會四處移動 - 它們會「卡住」到位,並且只是被切換。

給這個鏡頭,讓我們知道它是如何工作的。祝你好運!

+0

嗨,感謝您的回覆,我必須承認,當我閱讀它時,我認爲是必須的.​​.....但遺憾的是,問題依然存在......這太煩人了,我看不出原因它。任何其他想法? 由於某些原因,這個問題在長子菜單上是最差的。較短的有時可以。 – Anni 2009-12-16 15:11:21

0

我有這個同樣的問題,事實證明,它實際上是黃色的提示是那樣的原因。如果最終用戶的光標設法將鼠標懸停在工具提示上,safari將結束懸停事件b/c,它不會將工具提示看作其父級html元素的一部分。作爲一個修復,我實現了jquery,當最終用戶將鼠標移到它們上方時,從導航中的標籤中移除標題屬性。

$(document).ready(function() { 
    var originalTitle = ''; 
    $("div#menu ul li a").hover(
    function() { 
     originalTitle = $(this).attr("title"); 
     $(this).attr("title",""); 
    }, 
    function() { 
     $(this).attr("title",originalTitle); 
    } 
    );    
}); 

希望這可以幫助所有其他人解決此問題,因爲我花了大約一個小時才弄明白。