Im trying to achieve current page highlights on wordpress similar to this site
Alex Soth.
I'm very nearly there with my css.
At present i have current page highlights on pages, ie. home,calendar, projects. However when it come to current page highlights on child pages i have a problem.
the indented child page list appears on hover when selecting a child page, but after page selection the menu reverts back to the standard pages menu with no visible child menus? unlike the link to the Alex Soth site where the extended menu stays and current page is highlighted
I know that the answer will be a simple piece of css involving current_page_item and possible position:relative to obtain the menu staying visible after selection. But i can for the life of me work it out.
Any ideas Ive attached my relivant pieces of css below??
thanks
/* =Link Styles
------------------------------------------------------------------*/
input#submit {
cursor: pointer;
}
input#searchsubmit {
background: url(images/search.png) no-repeat center;
}
input#searchsubmit:hover {
background: url(images/search.png) no-repeat center #3399FF !important;
cursor: pointer;
}
.navigation a:hover, input#submit {
background: #3399FF;
color: #3399FF !important;
}
a {
color: #666;
}
a:hover, a:hover span {
color: #c11501 !important;background-color: #fae100;
}
.entry sup a,
#main_nav .current_page_item a,
#main_nav .current_page_ancestor a
{
color: #666 !important;
}
#main_nav h1.masthead a {
color: #666;
}
#main_nav h1.masthead a:hover {
border-right: none;
}
h2 a, #main_nav a {
color: #3399FF;
}
img a, img a:hover {
text-decoration: none;
}
.post a, .navigation a {
font-weight: bold;
color: #000;
}
.navigation a {
background: #EEE;
color: #666;
font-weight: normal;
padding: 3px 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.post sup {
font-size: 11px;
color: #aaa;
}
.post sup a {
border: 0;
margin: 0;
font-weight: normal;
font-size: 10px;
}
#supplementary .post_nav ul.about_nav li a, #supplementary .post_nav ul.single_post_meta a, #supplementary ul.contact_key li a {
color: #888888;
border-bottom: 0;
}
/* =Main Menu
------------------------------------------------------------------*/
#main_nav ul.menu li {
position: relative;
}
#main_nav ul.menu li:hover ul.sub-menu,
#main_nav ul.menu li:hover ul.children {
display: block;
}
