問題:「About」の上にマウスを置くとサブメニューが表示されるのに、そのいずれかの項目に移動しようとすると消えてしまうのはなぜですか?
私のstyle.cssの一部:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
私のindex.htmlの一部:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Homepage</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Papers</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Curriculum Vitae</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</li>
<!-- <li class="last"><a href="#">Contact</a></li> -->
</ul>
<br class="clearfix" />
</div>