CSS Kubrick Style Menu
-
I have a pure CSS menu but I would like the current page to be highlighted by different effects.
I have the following css:
#navlist
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
background: #000000;
}#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #FFFFFF;
padding-bottom: 2px;
background: transparent;
color: #FFFFFF;
}#navlist a:hover { color: #ABC7ED; }'
and the following in my header file:
<ul id=”navlist”>
<li class=”<?if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”>“>Home- >
</div>’
Yet it still doesn’t highlight the current page as I define in the css. Any help would be appreciated.
- The topic ‘CSS Kubrick Style Menu’ is closed to new replies.