Having trouble creating a expanding vertical navigation

[Vedder]

Hi there

I am currently about to finish a website and one requirement is that i needs to have a vertical navigation and when you hover over the "users" link, to the right another column appears which allows you to view the names, pretty simple stuff. I have set up my navigation as I want it in my style sheet and have made a class called "submenu" which contains all the properties for the expandable bit. I figure to set the display to none, unless the user hovers, then the element is shown.

Here is my CSS for the submenu:

ul .SubMenu
{
    line-height:20px;
    display:block;
    z-index:1;
    float:none;
    border-right:1px solid #686868;
    border-top:1px solid #686868;
    border-bottom:1px solid #686868;
    border-left:1px solid #686868;
    background-image:url('../Images/Layout/Navigation/navbutton.jpg');
    position:absolute;
    top:70px;
    left:185px;
}

So I am thinking to get the element to show i need to do something like:

SubMenu:hover
{
display:block;
}

My HTML looks like this

<div id="Navigation">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Our People ></a>
                            <ul class="SubMenu">
                                    <li><a href="#">Name 1</a></li>
                                    <li><a href="#">Name 2</a></li>
                                    <li><a href="#">Name 3</a></li>
                                    <li><a href="#">Name 4</a></li>
                                    <li><a href="#">Name 5</a></li>
                                    
                                    
                                </ul>

                            </li>
                            <li><a href="#">Services</a></li>

Normally it is something easy with me but can anyone tell me why I cant do anything with SubMenu:hover?

Many thanks

 

[t31os]

Well firstly your hover class is missing a period/fullstop/dot.... in the CSS....

http://www.dynamicdrive.com/style/csslibrary/category/C2/

Check some of those out... there are hundreds of menus around the web created with CSS that work across browsers, it would easier and best advised to look at a premade one and simply adjust as required.