Hi All,

I designed one website useing div tags (its completed). for that website, left vertical menu is there for that i want use like switch type buttons can any one tell me how to do that.

And i know switch type menu but not like vertical menu bar. only i can give one link as a switch type but i want in that some links tobe switch type some should be normal links.
plzzzzzzzzzzzzzzzzzzzzzzzzz can any one help me in this.

thanq

I am not too sure if this will help but you can check out dynamic drive for a lot of really good free resources. The link to the switch menu is
here
hope this helps

ya i visited this link, but for my links i used images as background. i tryd in the same code to change how i want but no use.

Are you embedding the images? I think since you are using a list for the menu you can give them ids and you can then set the background images using css to call this ids.

can u just give code so that i can understand what u want

Hi,

Here is the CSS code:

This is the css code i saved file as a style.css

body {
text-align: center;
background-color: #FFFFFF;
margin:1px 0px 0px 0px;
color:#333333;
}

A:link {
COLOR: #ba0001; text-decoration: none;
}
A:visited {
COLOR: #ba0001; text-decoration: none;
}
A:active {
COLOR: #ba0001; text-decoration: none;
}
A:hover {
COLOR: #ba0001; text-decoration: underline;
}

#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 1004px;
text-align: left;
background: #FFFFFF url('images/main-bg.jpg') top left repeat-y;
}

#page_header {
height: 82px;
background: #FFFFFF url('images/topbanner.jpg') bottom left no-repeat;
clear: both;
}

/* Start Main menu */
#menu{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
float:left;
height:16px;
}
#menu a{
float:left;
height:16px;
width:132px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn1.jpg) center center repeat-x;
}
#menu a:hover{
color:#FFFFFF;
}
#menu .current_page{
color:#FFFFFF;
}

#menu2{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu2 ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu2 li{
float:left;
height:16px;
}
#menu2 a{
float:left;
height:16px;
width:210px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn2.jpg) center center repeat-x;
}
#menu2 a:hover{
color:#FFFFFF;
}
#menu2 .current_page{
color:#FFFFFF;
}
/* End Main menu */

/* Start Left Side */
#left_side {
float:left;
width:205px;
}
#left_side h3 {
margin:0px 0px 0px 0px;
height:43px;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#FFFFFF;
padding:15px 4px 4px 70px;
border-right: 1px #999999 solid;
background-image:url(images/left-hed-bg.jpg);
background-repeat:repeat-x;
}
#left_side pre {
margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px;
height:86px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
background-image:url(images/user-bg.jpg);
}
/*
.sign {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 130px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
}
*/
.outrline{
width:140px;
height:13px;
margin:10px 0px 0px 23px;
background-color:#FFFFFF;
border:1px solid #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
#left_side p {
margin-top:0px;
margin-bottom:0px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
color: #666666;
text-align: justify;
}
/* Start Left Menu */
#linklist {
padding-left: 0;
margin-left: 0;
border-bottom: 0px solid #666666;
display:block;
width: 200px;
height:10px;
line-height:15px;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
}
#linklist li {
width:183px;
height:10px;
list-style: none;
margin:0;
font-family:verdana;
font-size:11px;
line-height:15px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
}
#linklist li a {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #444343;
line-height:15px;
}
#linklist li a:hover {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #ba0001;
line-height:15px;
}
/* End Left Menu */

/* Start Left Links Menu */
.mainDiv{
width:200px;
}
.topItem{
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:left left;
background-repeat:no-repeat;
border: none;
width: 200px;
height: 10px;
color: #000000;
cursor:pointer;
text-indent:10px;
}
.topItemOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.topItemClose{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #000000;
cursor:pointer;
}
.topItemCloseOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.dropMenu{
font: 11px verdana;
background-color: #FFFFFF;
color: #000000;
border: 0px solid #FFFFFF;
border-width: 0px 0px 0px 0px;
filter:alpha(opacity=100);
padding-top:0px;
padding-bottom:0px;
}
.subMenu{
display:block;
}
.subItem{
margin-left:5px;
margin-top:2px;
height:10px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItem a{
margin-left:15px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItemOver{
margin-left:0px;
margin-top:2px;
font: 10px verdana;
height:10px;
color: #FF0112;
}
.subItemOver a{
margin-left:20px;
font: 10px verdana;
cursor:pointer;
color: #FF0112;
text-decoration:none;
}
/* End Left Links Menu */

/* End Left Side */

#content_wrapper {
margin-top:5px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border:0px dashed #FFFFFF;
}

/* Start Right Side */
#right_side {
float: right;
width:195px;
}
#right_side h3 {
margin:0px;
height:30px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #ffffff;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-hed-bg.jpg);
background-repeat: repeat-x;
}
#right_side p {
margin-top:5px;margin-bottom:15px;
padding:0px 5px 0px 5px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
line-height: 15px;
color: #333333;
text-align: left;
}
#right_side h5 {
margin:0px;
height:44px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #333333;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-sub-bg.jpg);
background-repeat: repeat-x;
}
/* End Right Side */

/* Start Center */
#center {
margin-left:200px;
margin-right:194px;
}
#center h3 {
height:79px;
margin:0px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #97be53 solid;
background-image: url(images/cntr-main-bg.jpg);
background-repeat: repeat-x;
}
#center p {
margin:0px 0px 0px 0px;
padding:7px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
text-align: justify;
}
.maintop{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
font-weight:normal;
line-height:12px;
text-align:left;
}
#center h6{
width:282px;
height:175px;
float:left;
margin:4px 2px 0px 6px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
text-align:left;
color: #ba0001;
padding:5px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban.jpg);
background-repeat: no-repeat;
}
#center h4{
width:285px;
height:175px;
margin:4px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px 2px 7px 7px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban2.jpg);
background-repeat: no-repeat;
}
#center h5{
height:170px;
margin:0px 0px 0px 7px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #FFFFFF solid;
background-image: url(images/cntr-btm-ban.jpg);
background-repeat: no-repeat;
}
#center A:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:underline;
padding:0px 0px 0px 350px;
}
/* End Center */

/* Start Footer */
#page_footer {
height:20px;
background:#e0dfdf;
clear:both;
}
#page_footer p {
padding-top:3px;
text-align:center;
font-family: verdana;
font-size: 10px;
line-height:14px;
color:#333333;
}
#page_footer2 {
height:15px;
background:#FFFFFF;
clear:both;
}

#page_footer A:link {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:visited {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:active {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:hover {
COLOR: #382f0c; text-decoration: underline
}
/* End Footer */
















#menu_bar {
margin:0px;
padding:0px;
height:35px;
clear:both;
}

#content_wrapper {
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border:0px dashed #FFFFFF;
}






#navcontainer ul {
padding-left: 0;
margin-left: 0;
margin-top:0px;
background: #32c721 url('img/bar.jpg') no-repeat top right;
color: #ffffff;
float: left;
width: 100%;
height: 35px;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform: uppercase;
}
#navcontainer ul li { display: inline; }

#navcontainer ul li a {
padding-top: 9px;
padding-bottom: 11px;
padding-left:10px;
padding-right:10px;
background-color: transparent;
color: #ffffff;
text-decoration: none;
float: left;
border-right: 1px #38bd07 solid;
}

#navcontainer ul li a:hover {
background: #3ade24 url('img/bar_bg_hover.jpg') repeat-x bottom left;
color: #1d2cff;
}

.thumbnail_left {
float:left;
margin-right:10px;
margin-bottom:5px;
border:0px;
}

.thumbnail_right {
float:right;
margin-left:10px;
margin-bottom:5px;
border:0px;
}


and HTML code is here:


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<head>

<!-- Site Title -->
<title>f-bay...</title>

<!-- Style -->
<link href='style.css' type='text/css' rel='stylesheet' />
<script type="text/javascript" src="images/xpmenuv21.js"></script>
</head>


<body>

<div id='page_wrapper'>

<div id='page_header'>
</div>

<!-- Start Main Menu -->
<div id="menu">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ornaments</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Automobiles</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Miscellaneous</a></li>
<li><a href="#">&nbsp;&nbsp;Computer Hardware</a></li>
</ul>
</div>

<div id="menu2">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Property rentals available</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Matrimonial - Brides wanted</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Paying Guest facilities available</a></li>
</ul>
</div>
<!-- End Main Menu -->

<div id='content_wrapper'>

<!-- Start Left side -->

<!-- Start Left links -->
<div id='left_side'>
<ul id="linklist">
<li><a href="#" >Create Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#" >Search Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Advertisement</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">COO Speaks</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Leave Rules</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">List of Holidays 2008</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Obituary</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Focus Coimbatore Magazine</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Extracurricular Facilities</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Line Count Records of Focusites</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Accounts Documents</a></li>
<li><img src="images/left-div.jpg" /></li>
</ul>
<!-- End Left links -->

<h3>User Login</h3>

<pre><input type="text" name="textfield" class="outrline" />
<input type="text" name="textfield" class="outrline" />
Sign In
</pre>


<h3>My Links</h3>
<h3>News / Events</h3>

</div>
<!-- End Left side -->

<!-- Start Right side -->
<div id='right_side'>

<h3>About Company</h3>
<h5>Services</h5>
<p><img src="images/exp.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
<h5>Products</h5>
<p><img src="images/exp2.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
</div>
<!-- End right side -->

<!-- Start Center -->
<div id='center'>
<h3><img src="images/main-bullet.jpg"> Intranet <img src="images/main-bullet-arrow.jpg">
<p class="maintop">This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.
Please click on any of the sections for more details of that respective heading.</p></h3>
<h6>B'days <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h6>
<h4>Events <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h4>
<p></p>
<p></p>
<p></p>
<h5>Latest News <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all office-based and home-based employees<br>of Focus Infosys. Please click on any of the sections for more details of that<br>respective heading. This is an internal website (intranet) for all office-based and<br>home-based employees of Focus Infosys. Please click on any of the<br>sections for more details of that respective heading. This is an<br>internal website (intranet) for all office-based and home-based<br><a href="#" id="more">more...</a></p>
</h5>
<p>This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.</p>
</div>

</div>
<!-- End Center -->

<!-- Start Bottom -->
<div id='page_footer'>
<p>
Copyright &copy; 2008 Designed By: <a href="http://www.focusmt.com">Focus Infosys (India) Pvt Ltd</a>
</p>
</div>
<div id="page_footer2">
</div>
<!-- End Bottom -->

</div>

</body>
</html>

for this website left i m tryng to put switch type menu.

thanq in advance

You could try something like this:

CSS

HTML

Hi,

Here is the CSS code:

This is the css code i saved file as a style.css

body {
text-align: center;
background-color: #FFFFFF;
margin:1px 0px 0px 0px;
color:#333333;
}

A:link {
COLOR: #ba0001; text-decoration: none;
}
A:visited {
COLOR: #ba0001; text-decoration: none;
}
A:active {
COLOR: #ba0001; text-decoration: none;
}
A:hover {
COLOR: #ba0001; text-decoration: underline;
}

#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 1004px;
text-align: left;
background: #FFFFFF url('images/main-bg.jpg') top left repeat-y;
}

#page_header {
height: 82px;
background: #FFFFFF url('images/topbanner.jpg') bottom left no-repeat;
clear: both;
}

/* Start Main menu */
#menu{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
float:left;
height:16px;
}
#menu a{
float:left;
height:16px;
width:132px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn1.jpg) center center repeat-x;
}
#menu a:hover{
color:#FFFFFF;
}
#menu .current_page{
color:#FFFFFF;
}

#menu2{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu2 ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu2 li{
float:left;
height:16px;
}
#menu2 a{
float:left;
height:16px;
width:210px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn2.jpg) center center repeat-x;
}
#menu2 a:hover{
color:#FFFFFF;
}
#menu2 .current_page{
color:#FFFFFF;
}
/* End Main menu */

/* Start Left Side */
#left_side {
float:left;
width:205px;
}
#left_side h3 {
margin:0px 0px 0px 0px;
height:43px;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#FFFFFF;
padding:15px 4px 4px 70px;
border-right: 1px #999999 solid;
background-image:url(images/left-hed-bg.jpg);
background-repeat:repeat-x;
}
#left_side pre {
margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px;
height:86px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
background-image:url(images/user-bg.jpg);
}
/*
.sign {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 130px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
}
*/
.outrline{
width:140px;
height:13px;
margin:10px 0px 0px 23px;
background-color:#FFFFFF;
border:1px solid #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
#left_side p {
margin-top:0px;
margin-bottom:0px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
color: #666666;
text-align: justify;
}
/* Start Left Menu */
#linklist {
padding-left: 0;
margin-left: 0;
border-bottom: 0px solid #666666;
display:block;
width: 200px;
height:10px;
line-height:15px;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
}
#linklist li {
width:183px;
height:10px;
list-style: none;
margin:0;
font-family:verdana;
font-size:11px;
line-height:15px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
}
#linklist li a {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #444343;
line-height:15px;
}
#linklist li a:hover {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #ba0001;
line-height:15px;
}
/* End Left Menu */

/* Start Left Links Menu */
.mainDiv{
width:200px;
}
.topItem{
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:left left;
background-repeat:no-repeat;
border: none;
width: 200px;
height: 10px;
color: #000000;
cursor:pointer;
text-indent:10px;
}
.topItemOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.topItemClose{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #000000;
cursor:pointer;
}
.topItemCloseOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.dropMenu{
font: 11px verdana;
background-color: #FFFFFF;
color: #000000;
border: 0px solid #FFFFFF;
border-width: 0px 0px 0px 0px;
filter:alpha(opacity=100);
padding-top:0px;
padding-bottom:0px;
}
.subMenu{
display:block;
}
.subItem{
margin-left:5px;
margin-top:2px;
height:10px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItem a{
margin-left:15px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItemOver{
margin-left:0px;
margin-top:2px;
font: 10px verdana;
height:10px;
color: #FF0112;
}
.subItemOver a{
margin-left:20px;
font: 10px verdana;
cursor:pointer;
color: #FF0112;
text-decoration:none;
}
/* End Left Links Menu */

/* End Left Side */

#content_wrapper {
margin-top:5px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border:0px dashed #FFFFFF;
}

/* Start Right Side */
#right_side {
float: right;
width:195px;
}
#right_side h3 {
margin:0px;
height:30px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #ffffff;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-hed-bg.jpg);
background-repeat: repeat-x;
}
#right_side p {
margin-top:5px;margin-bottom:15px;
padding:0px 5px 0px 5px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
line-height: 15px;
color: #333333;
text-align: left;
}
#right_side h5 {
margin:0px;
height:44px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #333333;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-sub-bg.jpg);
background-repeat: repeat-x;
}
/* End Right Side */

/* Start Center */
#center {
margin-left:200px;
margin-right:194px;
}
#center h3 {
height:79px;
margin:0px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #97be53 solid;
background-image: url(images/cntr-main-bg.jpg);
background-repeat: repeat-x;
}
#center p {
margin:0px 0px 0px 0px;
padding:7px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
text-align: justify;
}
.maintop{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
font-weight:normal;
line-height:12px;
text-align:left;
}
#center h6{
width:282px;
height:175px;
float:left;
margin:4px 2px 0px 6px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
text-align:left;
color: #ba0001;
padding:5px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban.jpg);
background-repeat: no-repeat;
}
#center h4{
width:285px;
height:175px;
margin:4px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px 2px 7px 7px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban2.jpg);
background-repeat: no-repeat;
}
#center h5{
height:170px;
margin:0px 0px 0px 7px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #FFFFFF solid;
background-image: url(images/cntr-btm-ban.jpg);
background-repeat: no-repeat;
}
#center A:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:underline;
padding:0px 0px 0px 350px;
}
/* End Center */

/* Start Footer */
#page_footer {
height:20px;
background:#e0dfdf;
clear:both;
}
#page_footer p {
padding-top:3px;
text-align:center;
font-family: verdana;
font-size: 10px;
line-height:14px;
color:#333333;
}
#page_footer2 {
height:15px;
background:#FFFFFF;
clear:both;
}

#page_footer A:link {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:visited {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:active {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:hover {
COLOR: #382f0c; text-decoration: underline
}
/* End Footer */


and HTML code is here:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<head>

<!-- Site Title -->
<title>f-bay...</title>

<!-- Style -->
<link href='style.css' type='text/css' rel='stylesheet' />
<script type="text/javascript" src="images/xpmenuv21.js"></script>
</head>


<body>

<div id='page_wrapper'>

<div id='page_header'>
</div>

<!-- Start Main Menu -->
<div id="menu">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ornaments</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Automobiles</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Miscellaneous</a></li>
<li><a href="#">&nbsp;&nbsp;Computer Hardware</a></li>
</ul>
</div>

<div id="menu2">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Property rentals available</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Matrimonial - Brides wanted</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Paying Guest facilities available</a></li>
</ul>
</div>
<!-- End Main Menu -->

<div id='content_wrapper'>

<!-- Start Left side -->

<!-- Start Left links -->
<div id='left_side'>
<ul id="linklist">
<li><a href="#" >Create Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#" >Search Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Advertisement</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">COO Speaks</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Leave Rules</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">List of Holidays 2008</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Obituary</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Focus Coimbatore Magazine</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Extracurricular Facilities</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Line Count Records of Focusites</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Accounts Documents</a></li>
<li><img src="images/left-div.jpg" /></li>
</ul>
<!-- End Left links -->

<h3>User Login</h3>

<pre><input type="text" name="textfield" class="outrline" />
<input type="text" name="textfield" class="outrline" />
Sign In
</pre>


<h3>My Links</h3>
<h3>News / Events</h3>

</div>
<!-- End Left side -->

<!-- Start Right side -->
<div id='right_side'>

<h3>About Company</h3>
<h5>Services</h5>
<p><img src="images/exp.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
<h5>Products</h5>
<p><img src="images/exp2.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
</div>
<!-- End right side -->

<!-- Start Center -->
<div id='center'>
<h3><img src="images/main-bullet.jpg"> Intranet <img src="images/main-bullet-arrow.jpg">
<p class="maintop">This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.
Please click on any of the sections for more details of that respective heading.</p></h3>
<h6>B'days <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h6>
<h4>Events <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h4>
<p></p>
<p></p>
<p></p>
<h5>Latest News <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all office-based and home-based employees<br>of Focus Infosys. Please click on any of the sections for more details of that<br>respective heading. This is an internal website (intranet) for all office-based and<br>home-based employees of Focus Infosys. Please click on any of the<br>sections for more details of that respective heading. This is an<br>internal website (intranet) for all office-based and home-based<br><a href="#" id="more">more...</a></p>
</h5>
<p>This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.</p>
</div>

</div>
<!-- End Center -->

<!-- Start Bottom -->
<div id='page_footer'>
<p>
Copyright &copy; 2008 Designed By: <a href="http://www.focusmt.com">Focus Infosys (India) Pvt Ltd</a>
</p>
</div>
<div id="page_footer2">
</div>
<!-- End Bottom -->

</div>

</body>
</html>

for this website left i m tryng to put switch type menu.

thanq in advance

u zip the files and give as attachment coz without image not able to understand.

Hi,

I attached zip file.