0

こんにちは、ページにシンプルなサイドバー メニューを設定しようとしています。

私のcssは次のようになります

#nav {
 float:left;
 font-size: 9pt;
 width:2in;
 margin: 0px; 
 padding: 0px;
 color: white;
}

#nav :link{color:white ;text-decoration:none;}
#nav :visited{color:white ;text-decoration:none;}
#nav :hover{color:white  ;text-decoration:none;}
#nav :active{color:white ;text-decoration:none;}


#nav ul{
 background: #efefef; 
 background: linear-gradient(top, #555555 0%, #aaaaaa 100%);  
 background: -moz-linear-gradient(top, #555555 0%, #aaaaaa 100%); 
 background: -webkit-linear-gradient(top, #555555 0%,#aaaaaa 100%); 
 padding: 0 20px;
 border-radius: 10px;  
 list-style: none;
 position: relative;
 display: inline-table;
}

#nav ul ul{
 display: none;
 position: absolute;
 left: 100%;
 top: 0;
 text-align:left;
}

#nav ul li:hover{
 background: #00008b;
 color: #fff;
 display: block;
}

#nav ul li:hover > ul{
 width:85%;
 display:block;
}

そして私のhtmlのような

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel='stylesheet' type="text/css" href='./main.css'> 
</head>

<body>

<div id='nav'>
<ul id='topmenu'>
    <li><a href="execsumm.html">Summary</a> </li>
    <li><a href="current.html">Parties</a>
        <ul>
            <li><a href="ukprocess.html">Balearics</a></li>
            <li><a href="usprocess.html">Americas</a></li>
            <li><a href="approcess.html">Asia</a></li>
        </ul>
    </li>
    <li><a href="proposed.html">New Proposal</a></li>
    <li><a href="views.html">Views</a>
        <ul>
            <li><a href="./Interviews/mes.html">Frames</a></li>
            <li><a href="./Interviews/bot.html">Robot</a></li>
        </ul>
    </li>
    <li><a href="">Existing</a></li>
    <li><a href="">Contacts</a></li>
    <li><a href="">dfjd</a></li>
</ul>
</div>


<div id='main'>
content here
</div>
</body>

</html>

メニューは最初のホバーまでは正常に機能しますが、マウスを第 2 レベルのリストに移動しようとすると、メニューが消えます。私は何を間違っていますか、どうすれば修正できますか?

ありがとう

4

1 に答える 1