如何在默认的Google主页上创建菜单“工具栏”？
如何在默认的Google主页上创建菜单“工具栏”？
提问于 2011-09-26 22:25:02
我正在尝试创建一个带有“工具栏”的主页，它看起来像默认的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吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-09-26 22:38:31
对于2号，您可以制作一个纯CSS嵌套菜单，如这。
Stack Overflow用户
发布于 2011-09-26 22:32:27
有人能帮我实现1吗？ 1.如何在鼠标悬停在菜单项上时，将菜单项的背景“灰化”(如在> Google页面中)
a:hover
{
background-color:gray;
}希望这能帮上忙，我会做第二件事
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7562089
复制相关文章
相似问题
腾讯云开发者
