This is what i am using as my page, and i only want to hihglight the top part i.e only test and not the lowers when i include the current page hihglight class to the menu the whole section is hihglighted, is there a way to hihglight just the li and not the ul under the li that are contained within the same class.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<style type="text/css" media="screen">
/*
horizontal menu coding
*/
#nav {
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display:block;
padding: 7px 23.9px;
text-decoration: none;
font-family:"Arial";
color: white;
border-right: 1px solid #ccc;
border-bottom: 1px dashed #ccc;
font-size: 14px;
background-color: #3f6fb7; }
}
#nav li a:hover {
color: #3f6fb7;
background-color: #d1cf9f; }
#nav li.current-pageHorizontal a
{
background:#d1cf9f;
color: white;
}
#nav ul.current-pagelowerHorizontal a
{
background:#Black;
color: white;
}
/*
Print menu coding
*/
</style>
</head>
<body onLoad="preloadImages();" bgcolor="#ffffff">
<div class="ts-1-13">
<ul id="nav">
<li>
<a href="testnewMenu.html">test</a>
<!--for the new menu -->
<ul id="nav" class="current-pageHorizontal">
<a href="XXX.html">Lower 1 </a>
</ul>
<ul id="nav">
<a href="XXX.html">Lower 2</a>
</ul>
<ul id="nav">
<a href="XXX.html">Lower 3 </a>
</ul>
<ul id="nav">
<a href="XXX.html"> Lower 4</a>
</ul>
<!--for the new menu ul under a list -->
</li>
<li>
<a href="XXX.html">Test2</a>
</li>
<li>
<a href="XXX.cfm">test 3</a>
</li>
<li>
<a href="About_Us.html">About Us</a>
</li>
</ul>
</div>
</body>
</html>
This should solve it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<style type="text/css" media="screen">
/*
horizontal menu coding
*/
#nav ul, ul#nav {
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display:block;
padding: 7px 23px 9px;/* Correction: no such thing as fractional px*/
text-decoration: none;
font-family:"Arial";
color: white;
border-right: 1px solid #ccc;
border-bottom: 1px dashed #ccc;
font-size: 14px;
background: #3f6fb7; }
#nav >li:hover> a{ /*this is the easy way*, but it doesnt support older IE, you would nned .js to do hovers on non anchors anyway*/
color: #3f6fb7;
background: #d1cf9f; }
#nav li.current-pageHorizontal a
{
background:#d1cf9f;
color: white;
}
#nav ul.current-pagelowerHorizontal a
{
background:#Black;
color: white;
}
</style>
</head>
<body onLoad="preloadImages();" bgcolor="#ffffff">
<div class="ts-1-13">
<ul id="nav">
<li>
<a href="testnewMenu.html">test</a>
<!--for the new menu -->
<ul class="current-pageHorizontal">
<li><a href="XXX.html">Lower 1 </a></li>
</ul>
<ul >
<li><a href="XXX.html">Lower 2</a></li>
</ul>
<ul >
<li><a href="XXX.html">Lower 3 </a></li>
</ul>
<ul>
<li><a href="XXX.html"> Lower 4</a></li>
</ul>
<!--for the new menu ul under a list -->
</li>
<li>
<a href="XXX.html">Test2</a>
</li>
<li>
<a href="XXX.cfm">test 3</a>
</li>
<li>
<a href="About_Us.html">About Us</a>
</li>
</ul>
</div>
</body>
</html>
- I changed the doc type, for good measure
- there are no decimal pixel measurements
- you had a and extra “}” in your CSS which Brockie all the rules below
- Just so you know, only LIs can be direct children of ULs ( you had As directly inside the UL… a no-no)
- IDs must be unique ( unlike classes, you can only use them in a single element in the entire document)
FOR IE6 support your CSS would be
/*this is the works for >=IE6*/
#nav li:hover a{
color: #3f6fb7;
background: #d1cf9f; }
#nav li:hover li a{
color: white;
background: #3f6fb7; }
and you would need to tweak this to be able to work along side some script which will enable older IE to do hover on element other than anchors.
Thank you for the help but my problem still remains the same as described earlier as when I add the current page definition to the page, on hover the li is highlighted but I have to have the li highlighted by it. i.e. test only then when the user clicks on test and lower 1 I want test and lower 1 to be highlighted, as of now the whole li and the ul are highlighted instead of just the li i.e. only test, is that even possible to have only the li hihglighted and not the ul’s that are a child of the li
Thanks again
Am a little confused as to your goal,
IS what you want: for the top tier to highlight only OR for the top tier and the chosen lower item to highlight? …
If it’s the latter just use this edit to the CSS
/*this is the works for >=IE6*/
#nav li:hover a, #nav li:hover li:hover a{
color: #3f6fb7;
background: #d1cf9f; }
#nav li:hover li a{
color: white;
background: #3f6fb7; }
if you want .current-pageHorizontal to remain highlighted, even WITHOUT the user hovering… maybe this is what you wanted
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<style type="text/css" media="screen">
/*
horizontal menu coding
*/
#nav ul, ul#nav {
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display:block;
padding: 7px 23px 9px;/* Correction: no such thing as fractional px*/
text-decoration: none;
font-family:"Arial";
border-right: 1px solid #ccc;
border-bottom: 1px dashed #ccc;
font-size: 14px;
}
#nav li a, #nav .current-pageHorizontal li a, #nav .current-pageHorizontal:hover li a {
background: #3f6fb7 ;
color: white;
}
#nav li:hover a, #nav .current-pageHorizontal a, #nav .current-pageHorizontal:hover li:hover a {
color: #3f6fb7;
background: #d1cf9f; }
#nav .current-pageHorizontal li.current-pageHorizontal a , #nav .current-pageHorizontal li.current-pageHorizontal:hover a {
background:Black;
color: white;
}
</style>
</head>
<body onLoad="preloadImages();" bgcolor="#ffffff">
<div class="ts-1-13">
<ul id="nav">
<li class="current-pageHorizontal">
<a href="testnewMenu.html">test</a>
<!--for the new menu -->
<ul >
<li><a href="XXX.html">Lower 1 </a></li>
</ul>
<ul >
<li class="current-pageHorizontal"><a href="XXX.html">Lower 2</a></li>
</ul>
<ul >
<li><a href="XXX.html">Lower 3 </a></li>
</ul>
<ul>
<li><a href="XXX.html"> Lower 4</a></li>
</ul>
<!--for the new menu ul under a list -->
</li>
<li>
<a href="XXX.html">Test2</a>
</li>
<li>
<a href="XXX.cfm">test 3</a>
</li>
<li>
<a href="About_Us.html">About Us</a>
</li>
</ul>
</div>
</body>
</html>
Note that in the HTML I moved .current-pageHorizontal to the LIs
well the currentPagehorizontal will highlight the top and the bottom i.e. not only test but all the lowers as well, all i want is to highlight test when we are on test and when we are on lower 1 i want to highlight test an lower 1 i.e. lower 2 3 and 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<style type="text/css" media="screen">
/*
horizontal menu coding
*/
#nav {
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display:block;
padding: 7px 23.9px;
text-decoration: none;
font-family:"Arial";
color: white;
border-right: 1px solid #ccc;
border-bottom: 1px dashed #ccc;
font-size: 14px;
background-color: #3f6fb7; }
}
#nav li a:hover {
color: #3f6fb7;
background-color: #d1cf9f; }
#nav li.current-pageHorizontal a
{
background:#d1cf9f;
color: white;
}
#nav ul.current-pagelowerHorizontal a
{
background:#Black;
color: white;
}
/*
Print menu coding
*/
</style>
</head>
<body onLoad="preloadImages();" bgcolor="#ffffff">
<div class="ts-1-13">
<ul id="nav">
<li class="current-pageHorizontal" >
<a href="test.html">test</a>
<!--for the new menu -->
<ul id="nav">
<a href="XXX.html">Lower 1 </a>
</ul>
<ul id="nav">
<a href="XXX.html">Lower 2</a>
</ul>
<ul id="nav">
<a href="XXX.html">Lower 3 </a>
</ul>
<ul id="nav">
<a href="XXX.html"> Lower 4</a>
</ul>
<!--for the new menu ul under a list -->
</li>
<li>
<a href="XXX.html">Test2</a>
</li>
<li>
<a href="XXX.cfm">test 3</a>
</li>
<li>
<a href="About_Us.html">About Us</a>
</li>
</ul>
</div>
</body>
</html>
Copy paste my sample code from my last post, including the HTML, exactly as I posted.
My example assumes that lower2 is the current page. As you will see, Only TEST 1 and LOWER2 are highlighted. The other tabs get highlighted on :hover; I didn’t think you wanted to get rid of that functionality, if you do just delete the selectors containing :hover from the rules.