How to create a menu 'toolbar' like on the default Google homepage?_问答_开发者

How to create a menu 'toolbar' like on the default Google homepage?

开发者 https://www.devze.com 2023-04-08 19:40 出处：网络

I am trying to create a homepage with a \'toolbar\' look like the one that is used in the default google homepage.

相关专题：css jquery

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;

}


#nav开发者_C百科igation{

    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?

Can someone help me with how to implement 1
1. How to "gray out" the background of the menu item as the mouse hovers over it (like in >the Google page)