Question

我正在尝试使用“工具栏”创建一个主页，该主页看起来就像默认Google主页中使用的主页。

我设法将一些HTML和CSS放在一起，但我仍然无法弄清楚如何做以下两件事：

当鼠标悬停在菜单项的背景上时，如何“灰显”菜单项的背景（如在Google页面中）
如何实现嵌套菜单。有了这个，我怀疑单独使用CSS可能无法做到这一点，所以我可能需要使用javascript（在这种情况下，我将使用jQuery）

菜单结构如下：

Menu 1                    Menu 2
   Menu 1 Sub Item 1          Menu 2 Sub item 1
   Menu 1 Sub Item 2          Menu 2 Sub item 2 
                                   Menu 2 Sub Item 2 Sub Item 1
                                   Menu 2 Sub Item 2 Sub Item 2
                              Menu 2 Sub Item 3

这是我到目前为止提出的（HTML和CSS）：

<html><head>
<style type="text/css">
*{

padding:0px;

margin:0px;}

h2, h3{

    color: #1f497d;

    padding: 10px 0px 10px 0px;

}



body{

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #52525c;

    line-height: 18px;

}


#navigation{

    background-color: #2d2d2d;

    color: #FFFFFF;

    height: 25px;

    list-style-type: none;

    font-size: 13px;

}



#navigation ul li {

    list-style-type: none;

    padding: 5px 20px 3px 5px;

    float: left;

    }



#navigation a{

    color: #CCCCCC;

    text-decoration: none;

}



#navigation a:hover, a:visited, a:active{

    color: #FFFFFF;

    border-bottom-color: #c00000;

    border-bottom-width: 2px;

    border-bottom-style: solid;

}



#navigation a.current{

color:#FF0000;}    

.tab{

    width: 10%;

    float: left;

    text-align: center;

    font-size: 16px;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #CCCCCC;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #CCCCCC;

    border-left-width: 1px;

    border-left-style: solid;

    border-left-color: #CCCCCC;

}

.tab2{

    float: right;

    width: 8%;

    text-align: center;

    margin: 2px;

    background-color: #EFEFEF;

    color: #336699;

}



</style>
</head>
<body>
<div>
<div id="navigation">
  <ul>
    <li class="current"><a href="#">Menu Item 1</a></li>
    <li> <a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
    <li><a href="#">Menu Item 6</a></li>
    <li><a href="#">Sign in</a></li>
  </ul>

  </div>
</div>


</div>

</body></html>

有人可以帮我解决如何实施1和2的问题吗？

Answer 1

有人可以帮我解决如何实施1
1.当鼠标悬停在菜单项的背景上时，如何“灰显”菜单项的背景（如在＆gt; Google页面中）

a:hover
{
background-color:gray;
}

希望有所帮助，我将在第2号工作

Answer 2

对于数字2，您可以创建一个纯CSS嵌套菜单，如this。

如何在默认的Google主页上创建菜单“工具栏”？

2 个答案: