নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Tahoma, Arial, sans-serif;
/*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
font-size : 10px;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#button li #active {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>

.,

<div id="button">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Java Script</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Style 2.

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#navcontainer {
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
}

ul#navlist {
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li {
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
</style>

.,

<div id="navcontainer">

<ul id="navlist">

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Java Script</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Style 3.

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#menu15 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
}

#menu15 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu15 img {
border: none;
}

#menu15 li a {
height: 32px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 24px;
text-decoration: none;
}

#menu15 li a:link, #menu15 li a:visited {
color: #8BADCF;
display: block;
background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sxm-5WLofwI/AAAAAAAAAck/DTy4rENfgV8/menu15.gif);
padding: 8px 0 0 10px;
}

#menu15 li a:hover, #menu15 li #current {
color: #627EB7;
background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sxm-5WLofwI/AAAAAAAAAck/DTy4rENfgV8/menu15.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>

.,

<div id="menu15">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Style 4.

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#menu14 {
   width: 200px;
   margin: 10px;
   }

#menu14 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu14 img {
border: none;
}

#menu14 li a {
   height: 32px;
     voice-family: "\"}\"";
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }

#menu14 li a:link, #menu14 li a:visited {
   color: #333;
   display: block;
   background:  url(http://2.bp.blogspot.com/_4HKUHirY_2U/Sw9J34GZyxI/AAAAAAAAAW8/hv18w33snxc/menu14.gif);
   padding: 8px 0 0 10px;
   }

#menu14 li a:hover, #menu14 li #current {
   color: #FFF;
   background:  url(http://2.bp.blogspot.com/_4HKUHirY_2U/Sw9J34GZyxI/AAAAAAAAAW8/hv18w33snxc/menu14.gif) 0 -32px;
   padding: 8px 0 0 10px;
   }
</style>

.,

<div id="menu14">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Style 5.

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#menu13 {
    width: 200px;
    margin: 10px;
    }

#menu13 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu13 img {
border: none;
}

#menu13 li a {
    height: 32px;
      voice-family: "\"}\"";
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }

#menu13 li a:link, #menu13 li a:visited {
    color: #C7377D;
    display: block;
    background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sw9J0TKiAZI/AAAAAAAAAW0/SqacHBpDk_s/menu13.gif);
    padding: 8px 0 0 10px;
    }

#menu13 li a:hover, #menu13 li #current {
    color: #C7377D;
    background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sw9J0TKiAZI/AAAAAAAAAW0/SqacHBpDk_s/menu13.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }
</style>

.,

<div id="menu13">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>