メインの親メニュー項目がホバーされると、子要素の上であっても、その項目のサブメニューをトラバースしている間、アクティブなままになります。しかし、これは発生しません。なぜですか？
JS
var mastertabvar = new Object()
mastertabvar.baseopacity = 0
mastertabvar.browserdetect = ""
function showsubmenu(masterid, id) {
submenuobject = document.getElementById(id)
mastertabvar.browserdetect = submenuobject.filters ? "ie" : typeof submenuobject.style.MozOpacity == "string" ? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display = "block"
instantset(mastertabvar.baseopacity)
highlighting = setInterval("gradualfade(submenuobject)", 0)
}
function hidesubmenus(submenuarray) {
for (var i = 0; i < submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display = "none"
}
function instantset(degree) {
if (mastertabvar.browserdetect == "mozilla") submenuobject.style.MozOpacity = degree / 100
else if (mastertabvar.browserdetect == "ie") submenuobject.filters.alpha.opacity = degree
}
function gradualfade(cur2) {
if (mastertabvar.browserdetect == "mozilla" && cur2.style.MozOpacity < 1) cur2.style.MozOpacity = Math.min(parseFloat(cur2.style.MozOpacity) + 0.1, 0.99)
else if (mastertabvar.browserdetect == "ie" && cur2.filters.alpha.opacity < 100) cur2.filters.alpha.opacity += 10
else if (typeof highlighting != "undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid) {
mastertabvar[tabid] = new Array()
var menuitems = document.getElementById(tabid).getElementsByTagName("li")
for (var i = 0; i < menuitems.length; i++) {
if (menuitems[i].getAttribute("rel")) {
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length] = menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className == "selected") showsubmenu(tabid, menuitems[i].getAttribute("rel")) menuitems[i].getElementsByTagName("a")[0].onmouseover = function() {
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
CSS
.basictab{
margin-left: 0px;
list-style-type: none;
margin-bottom: 0;
text-align: center;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: gray;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
padding-right: 0px;
padding-left: 0px;
background-repeat: repeat-x;
padding-top: 0px;
padding-bottom: 7px;
border-radius: 10px 10px 0px 0px;
}
.basictab li{
display: inline;
margin: 0px;
background-image: url(../images/mainbar.png);
background-repeat: repeat-x;
background-color: rgba(0,51,0,1);
background-position: left;
border-radius: 50px 50px 0px 0px;
}
.basictab li a{
margin-left: 0;
background-color: rgba(0,0,0,1);
color: rgba(255,255,255,1);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: gray;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;
text-decoration: none;
background-image: url(../images/mainbar.png);
border-radius: 15px 15px 0px 0px;
}
.basictab li a:visited{
color: rgba(255,255,255,1);
}
.basictab li a:hover{
background-color: #FFFFFF;
color: rgba(255,255,255,1);
background-image: url(../images/behindbar.png);
background-repeat: repeat;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
.basictab li a:active{
color: rgba(255,255,255,1);
background-image: url(../images/behindbar.png);
background-repeat: repeat;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
padding-top: 10px;
background-color: #dbffff;
color: rgba(255,255,255,1);
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
background-image: url(../images/behindbar.png);
background-repeat: repeat;
}
.submenustyle{
border-top-width: 0;
width: auto;
display: none;
filter: alpha(opacity=0);
-moz-opacity: 0;
background-image: url(../images/behindbar.png);
background-repeat: repeat;
color: rgba(255,255,255,1);
font-size: 12px;
background-position: left;
letter-spacing: .2em;
word-spacing: 4em;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
margin-left: 15px;
margin-right: 15px;
}
* html .submenustyle{ /*IE only width definition*/
width: 100%;
}
.submenustyle a{
padding: 1px 5px;
text-decoration: none;
color: rgba(255,255,255,1);
}
.submenustyle a:hover{
font-size: 12px;
color: rgba(255,153,0,1);
}#navMenu {
}
HTML
<div class="grid_12">
<ul id="maintab" class="basictab">
<li class="active" rel="cyst"><a href="cyphm.htm">1</a></li>
<li rel="cylim"><a href="cylim.htm">2</a></li>
<li rel="cynic"><a href="cynic.htm">3</a></li>
<li><a href="cypfo.htm">4</a></li>
<li><a href="cyplca.htm">5</a></li>
<li><a href="cyfam.htm">6</a></li>
</ul>
<div id="cyst" class="submenustyle">
<a href="cyfd.htm">1</a>
<a href="cycl.htm">2</a>
<a href="cybr.htm">3</a>
<a href="cylm.htm">4</a>
<a href="cyth.htm">5</a>
<a href="cycin.htm">6</a>
</div>
<div id="cynic" class="submenustyle">
<a href="nicfd.htm">1</a>
<a href="niccl.htm">2</a>
<a href="nicbr.htm">3</a>
<a href="niclm.htm">4</a>
<a href="nicth.htm">5</a>
<a href="niccin.htm">6</a>
</div>
<div id="cylim" class="submenustyle">
<a href="limfd.htm">1</a>
<a href="limcl.htm">2</a>
<a href="limbr.htm">3</a>
<a href="limlm.htm">4</a>
<a href="limth.htm">5</a>
<a href="limcin.htm">6</a>
</div>
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>
</div>
</div>