Jquery 如何创建菜单'；工具栏'；比如默认的谷歌主页？
我正在尝试创建一个带有“工具栏”的主页，看起来就像默认谷歌主页中使用的工具栏 我已经设法将一些HTML和CSS放在一起，但我仍然无法解决如何做以下两件事：Jquery 如何创建菜单'；工具栏'；比如默认的谷歌主页？,jquery,html,css,Jquery,Html,Css,我正在尝试创建一个带有“工具栏”的主页，看起来就像默认谷歌主页中使用的工具栏 我已经设法将一些HTML和CSS放在一起，但我仍然无法解决如何做以下两件事： 如何在鼠标悬停在菜单项上时使其背景变灰（如谷歌页面） 如何实现嵌套菜单。有了这一点，我怀疑仅仅使用CSS是不可能的，因此我可能需要使用javascript（在这种情况下，我将使用jQuery） 菜单结构如下所示： Menu 1 Menu 2 Menu 1 Sub Item 1 Me
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><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>
*{
填充：0px；
边距：0px；}
h2，h3{
颜色：#1f497d；
填充：10px 0px 10px 0px；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#52525c；
线高：18px；
}
#航行{
背景色：#2d；
颜色：#FFFFFF；
高度：25px；
列表样式类型：无；
字体大小：13px；
}
#导航ulli{
列表样式类型：无；
填充：5px20px 3px5px；
浮动：左；
}
#导航a{
颜色：#中交；
文字装饰：无；
}
#导航a:悬停，a:已访问，a:活动{
颜色：#FFFFFF；
边框底色：#c00000；
边框底宽：2px；
边框底部样式：实心；
}
#当前导航{
颜色：#FF0000；}
.标签{
宽度：10%；
浮动：左；
文本对齐：居中；
字体大小：16px；
边框底宽：1px；
边框底部样式：实心；
边框底色：#中交；
右边框宽度：1px；
右边框样式：实心；
右边框颜色：#中交；
左边框宽度：1px；
左边框样式：实心；
左边框颜色：#中交；
}
.表2{
浮动：对；
宽度：8%；
文本对齐：居中；
保证金：2倍；
背景色：#EFEF；
颜色：#336699；
}
1.如何在鼠标悬停在菜单项上时“灰显”菜单项的背景（如>谷歌页面） 希望对你有帮助，我会处理第二个问题 有人能帮我实现1吗
1.如何在鼠标悬停在菜单项上时“灰显”菜单项的背景（如>谷歌页面）
希望能有所帮助，我将处理数字2。对于数字2，您可以制作纯CSS嵌套菜单。对于数字2，您可以制作纯CSS嵌套菜单。伙计们，谢谢你们的反馈。我的主要问题实际上是如何使用jQuery创建嵌套菜单。发布后不久，我就意识到了第一个问题的答案——所以我真的需要帮助解决第二个问题。谢谢你的反馈。我的主要问题实际上是如何使用jQuery创建嵌套菜单。发布后不久，我就意识到了第一个问题的答案——所以我真的需要帮助解决第二个问题。谢谢谢谢，但那不是我想做的。我想“突出显示”由模式“ul li”表示的元素，而不是由“ul li a”匹配的元素。换句话说，当鼠标悬停在锚点上时，我希望整个li元素变灰-如果我可以在CSS中执行此操作，那将很酷-否则，我只需使用jQueryAndew：谢谢，但这不是我想要做的。我想“突出显示”由模式“ul li”表示的元素，而不是由“ul li a”匹配的元素。换句话说，当鼠标悬停在锚点上时，我希望整个li元素变灰——如果我可以在CSS中这样做，那就太酷了——否则，我只需要使用jQuery
a:hover
{
background-color:gray;
}