1
雖然試圖找到解決這個問題，我發現我並不孤單在IE：懸停問題，但我還沒有找到一個單一的工作方案。IE10-div：hover只能部分工作，打破內部div鏈接
菜單在當前版本的Chrome和Firefox中完美運行，但在IE10中出現故障（未測試其他版本）。
我在頁面的頂部中心有一個1/4圈的下拉菜單，它在盤旋時擴展到大約3/4的圓。它有四個部分（鏈接），每個部分在展開鏈接時分別展開。
問題是：懸停效果似乎只在將鼠標懸停在實際鏈接上時才起作用，儘管：懸停適用於包含div。這不會太糟糕，除了當一個部分展開鏈接文本之間的每個空間時，該部分會關閉。它使菜單非常波濤洶涌，難以使用。
編輯：鏈接到小提琴 - >http://jsfiddle.net/2GzsQ/2/
這裏是菜單中的HTML：
<div id="navholder" class="">
<div id="navservice" class="outernav">
<a href="" alt="Services"><h2>Services</h2></a>
<div id="innavservice" class="innernav">
<a href="">Specimens</a> | <a href="">Collection Access</a> | <a href="">Identification</a> | <a href="">Books</a><br>
<a href="">Destructive Sampling</a> | <a href="">Loans</a> | <a href="">Specimen Submission</a><br>
<a href="">Specimen Labels</a> | <a href="">Quarantine</a> | <a href="">Data Use Conditions</a><br>
<a href="">Specimen Images</a>
</div>
</div>
<div id="navprojects" class="outernav">
<a href="" alt="Projects"><h2>Projects</h2></a>
<div id="innavprojects" class="innernav">
<a href="">Legumes of Arizona</a> | <a href="">Biodiversity Informatics</a> | <a href="">Floras</a><br>
<a href="">Nichol Turk's Head Cactus Working Group</a> | <a href="">Section 6</a><br>
<a href="">National Park Service</a> | <a href="">Pringle's Arizona Catalog</a><br>
<a href="">Type Imaging</a>
</div>
</div>
<div id="navresources" class="outernav">
<a href="" alt="Resources"><h2>Resources</h2></a>
<div id="innavresources" class="innernav">
<a href="">Convolvulaceae Pollen Atlas</a> | <a href="">Shantz Photographs</a><br>
<a href="">Convolvulaceae of Sonora</a> | <a href="">Floras for Other Regions</a><br>
<a href="">Arizona Floras and Floristic Works</a> | <a href="">Publications</a><br>
<a href="">Homer Shantz</a> | <a href="">Sample Photos</a> | <a href="">Links</a>
</div>
</div>
<div id="navariz" class="outernav">
<a href="" alt="About"><h2>About</h2></a>
<div id="innavariz" class="innernav">
<a href="">What is an Herbarium</a> | <a href="">About ARIZ</a><br>
<a href="">People</a> | <a href="">Associated Researchers</a><br>
<a href="">Our Logo</a> | <a href="">History</a> | <a href="">Donations</a>
</div>
</div>
</div>
而且，這裏是菜單中的CSS：
/* div containing drop-down top white circle navigation */
#navigationc {
width: 500px;
height: 375px;
position: relative;
margin: 0 auto 0 auto;
top: -150px;
z-index: 3;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.5;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
/* drop-down functionality */
#navigationc:hover {
top: 0;
}
/* Circle navigation */
/* moves #navservice div to top of drop-down navigation */
#navholder:hover #navservice {
margin-top: 5px;
}
/* contains the collection of links within each navigation section */
.innernav {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
transition: height 0.5s;
}
/* the first main section of the drop-down navigation menu */
#navservice {
margin-top: 155px;
-webkit-transition: margin-top 1s;
-moz-transition: margin-top 1s;
transition: margin-top 1s;
}
/* expands each menu section when it is hovered over to expose child links */
#navservice:hover #innavservice {
height: 105px;
}
#navprojects:hover #innavprojects {
height: 105px;
}
#navresources:hover #innavresources {
height: 105px;
}
#navariz:hover #innavariz {
height: 105px;
}
也許這只是我不得不接受的一個問題，但我覺得必須有一個解決方案。謝謝。
顯示一個實例。 （不要指望別人通過複製和粘貼狂歡來解決_you_問題。） – CBroe
好的，我做了一個小提琴，它至少展示了這個功能。 http://jsfiddle.net/2GzsQ/ – foxandsticks
_「我在頁面頂部中心有一個〜1/4圈的下拉菜單」_ - 我沒有看到任何類似於一個圓圈的東西，甚至更緊密...... – CBroe