2

これは、私が作成した垂直ナビゲーション バーのコードです。ここに追加する必要があるものがもう 1 つあります。それは、マウス オーバー時のフライアウト メニューです。私は多くのことを試しましたが、うまくいきませんでした。ここに私のCSSコードがあります

.navbar{
list-style-type: none;
margin: 0;
padding: 10px;
width: 280px; /* width of menu */
}

.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}

.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}

.navbar li a:visited, .navbar li a:active{
color: white;
}

.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be            equal or darker to link's hover's bgcolor*/
}

そしてhtml部分はこれです

<ul class="navbar">
<li><a href="#">»  Computers</a>

</li>
<li><a href="#" >»  Networking Solutions</a></li>
<li><a href="#/">»  Security Solutions</a></li>
<li><a href="#">»  Office Automations</a></li>
<li><a href="#">»  Gadgets</a></li>
<li><a href="#">»  Projectors and Display     Screens</a></li>
<li><a href="#">»  Peripherals and Components</a></li>
<li><a href="#">»  Softwares</a></li> 
<li class="lastitem"><a href="#">»  Customized Solutions</a></li>       
</ul>

私が望むのは、ユーザーがこのリストの項目のいずれかにマウスを合わせると、メニューとともにフライアウト メニューが表示されることです。前もって感謝します。

4

2 に答える 2