I am trying to create a homepage with a ‘toolbar’ look like the one that is used in the default google homepage.
I have managed to put some HTML and CSS together, but I still have not been able to work out how to do the following two things:
-
How to “gray out” the background of the menu item as the mouse hovers over it (like in the Google page)
-
How to implement a nested menu. With this, I suspect that this may not be possible with CSS alone and so I may need to use javascript (in which case, I’ll use jQuery)
The menu structure is like this:
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
Here is the (HTML and CSS) I have come up with so far:
<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>
Can someone help me with how to implement 1 and 2?
For number 2, you can make a pure CSS nested menu like this.