Wordpress menu structure change in css file - wordpress

Question

I have used the wordpress twenty eleven theme for my website. Now i want to crate a dropdown menu for my site. By default wordpress have the dropdown menu facility. Now when i hover on the main menu i got the sub-menu part. For example :-
I have a main menu like :-
Home | About | Contact
When i hover on the about menu it show the sub menus of "about" menu like
Home | About | Contact
Our Services
History
Our Staff
when i hover on the history menu it display the sub menu of History Menu like bellow:-
Home | About | Contact
Our Services
History
History 1
History 2
History 3
Our Staff
but i want to display the submenu of History, when i hover on About menu. If i hover on the About menu it should display like bellow :-
Home | About | Contact
Our Services
History
History 1
History 2
History 3
Our Staff
Please help me to get the output in the wordpress menu.
#access {
background: #00ADEE; /* Show a solid color for older browsers */
clear: both;
display: block;
width: 915px;
}
#access ul {
font-size: 11px;
list-style: none;
margin: 0;
padding: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 12px;
padding: 4px 9px;
text-decoration: none;
background: url(images/menu-border.png);
background-position: right 6px;
background-repeat: no-repeat;
text-transform: lowercase;
}
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
left: 11px;
width: 252px;
z-index: 99999;
background: #FFFFFF;
padding: 0 4px;
border: 1px solid #00AEEF;
}
#access ul ul li {
}
#access ul ul ul {
left: 23%;
top: 0;
border: none;
width: 150px;
}
#access ul ul ul li{
border: none;
width: 112px;
background:url(images/list.png);
background-position: 0 10px;
background-repeat: no-repeat;
background-color: #FFF;
width: 185px;
}
#access ul ul ul a{
border: none;
background: transparent;
}
.sub-menu .menu-item-object-custom a:hover{
height: 40px;
}
#access ul ul a {
border-bottom: 1px solid #BCBEC0;
color: #000;
font-size: 10px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 5px 7px;
width: 237px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
color: #000;
}
#access ul ul > a {
color: #000;
}
#access li:hover > a,
#access a:focus {
color: #FFFFFF;
}
#access ul li:hover > ul {
display: block;
}
#access ul ul .current_page_item > a {
color: #00ADEE;
font-weight: bold;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
color: #FFFFFF;
}

Answer 1

Basically, you need to find the rule where there is a :hover defined on a li element. It usually goes like this:
li:hover ul {
display: block;
}
for the second level menu to be visible, you'd need to add something like the following:
li:hover ul ul {
display: block;
}
This is just how it should be in theory, I'd need to see the part of the CSS that describes the menu so I could tell you an exact change to make.