I Have the following code:
#LeftMNav {
z-index : 100000;
}
#LeftMNav UL {
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
margin : 0;
width : auto;
color : #ffffff;
padding-top : 0;
background-color : #bacee0;
}
#LeftMNav LI {
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
margin : 0;
padding-top : 0;
list-style-type : none;
}
#LeftMNav a {
border-right : 1px solid #c3c8cb;
padding-right : 0;
background-position : 100% 50%;
border-top : 1px solid #fefefe;
display : block;
padding-left : 4px;
font-weight : normal;
padding-bottom : 3px;
border-left : 7px solid #eaeeee;
padding-top : 3px;
border-bottom : 1px solid #c3c8cb;
background-color: #eaeeee;
font-size : 10px;
color : #048;
font-family : Ms Sans Serif, Times New Roman;
text-decoration : none;
}
#LeftMNav a:hover {
border-left-color : #fefefe;
border-bottom-color : #c3c8cb;
border-top-color : #fefefe;
background-color: #f8fafc;
border-left : 7px solid #66ADD7;
font-size : 10px;
color : #993333;
font-family : Ms Sans Serif, Times New Roman;
text-decoration : none;
}
#LeftMNav a:active {
border-left-color : #fefefe;
border-bottom-color : #c3c8cb;
border-top-color : #fefefe;
background-color : #f8fafc;
border-right-color : #c3c8cb;
font-size : 10px;
color : #048;
font-family : Ms Sans Serif, Times New Roman;
text-decoration : none;
}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
background-color: #036;
color: #FFF;
width: 100%;
font: normal 100% arial, helvetica, sans-serif;
text-align: left;
}
li { display: inline; }
li a
{
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
text-decoration:none;
}
li a:hover
{
background-color: #F0F0F0;
color: #369;
}
now to display my menu i use..
<div class="menuheader">1</div>
<div id="LeftMNav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..1.php" style="text-decoration:none ">1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..2.php" style="text-decoration:none ">2</a></li>
</ul>
</div>
<div class="menuheader">2</div>
<div id="LeftMNav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..1.php" style="text-decoration:none ">1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..2.php" style="text-decoration:none ">2</a></li>
</ul>
</div>
when i validate it says i have same id twice wich is true, can i use class instead?? so idont have to duplicate code and make my stylesheet bigger if so how do i do this?? im new to css.
thankyouIn the html - class="LeftMNav".
In the css - .LeftMNav
#LeftMNav {
z-index : 100000;
}
#LeftMNav UL {
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
margin : 0;
width : auto;
color : #ffffff;
padding-top : 0;
background-color : #bacee0;
}
#LeftMNav LI {
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
margin : 0;
padding-top : 0;
list-style-type : none;
}
#LeftMNav a {
border-right : 1px solid #c3c8cb;
padding-right : 0;
background-position : 100% 50%;
border-top : 1px solid #fefefe;
display : block;
padding-left : 4px;
font-weight : normal;
padding-bottom : 3px;
border-left : 7px solid #eaeeee;
padding-top : 3px;
border-bottom : 1px solid #c3c8cb;
background-color: #eaeeee;
font-size : 10px;
color : #048;
font-family : Ms Sans Serif, Times New Roman;
text-decoration : none;
}
#LeftMNav a:hover {
border-left-color : #fefefe;
border-bottom-color : #c3c8cb;
border-top-color : #fefefe;
background-color: #f8fafc;
border-left : 7px solid #66ADD7;
font-size : 10px;
color : #993333;
font-family : Ms Sans Serif, Times New Roman;
text-decoration : none;
}
#LeftMNav a:active {
border-left-color : #fefefe;
border-bottom-color : #c3c8cb;
border-top-color : #fefefe;
background-color : #f8fafc;
border-right-color : #c3c8cb;
font-size : 10px;
color : #048;
font-family : Ms Sans Serif, Times New Roman;
text-decoration : none;
}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
background-color: #036;
color: #FFF;
width: 100%;
font: normal 100% arial, helvetica, sans-serif;
text-align: left;
}
li { display: inline; }
li a
{
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
text-decoration:none;
}
li a:hover
{
background-color: #F0F0F0;
color: #369;
}
now to display my menu i use..
<div class="menuheader">1</div>
<div id="LeftMNav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..1.php" style="text-decoration:none ">1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..2.php" style="text-decoration:none ">2</a></li>
</ul>
</div>
<div class="menuheader">2</div>
<div id="LeftMNav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..1.php" style="text-decoration:none ">1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"..2.php" style="text-decoration:none ">2</a></li>
</ul>
</div>
when i validate it says i have same id twice wich is true, can i use class instead?? so idont have to duplicate code and make my stylesheet bigger if so how do i do this?? im new to css.
thankyouIn the html - class="LeftMNav".
In the css - .LeftMNav