Navigation menu #1

This is an view of the Navigation menu. You need to download the images for this. 

In CSS file add

#navBox{float:left; width:347px; width:310px !important; height:208px; height:197px !important; margin:0px; padding:11px 20px 0px 17px; background:#5C3385; border:5px solid #DED6E7;}

#nav{
padding:0px;
margin-top:2px;
width:154px;
height:183px;
z-index:500;
}
#nav ul{padding:0px; margin:0px; list-style-type:none;}
#nav li{display:block; position:relative; padding:0px; margin:0px; text-align:right; color:#FFFFFF; height:20px; line-height:20px; width:154px; z-index:1000;}
#nav li a{color:#DED6E7; text-decoration:none; padding:0px; margin:0px; font-size:1.1em;}
#nav li a.active{color:#FFFFFF; font-weight:bold; text-decoration:none; padding:0px; margin:0px; font-size:1.1em;}
/***** hide sub nav and set styles for main nav items */
#nav li ul
{display:none; top:-32px; width:222px; padding:0px; margin:0px; background:url(wim_nv_00000g7.png) 6px 18px no-repeat; position:relative; z-index:600;}
/***** display sub menu on mouseover */
#nav li.over ul, #nav li:hover ul{display:block; position:absolute; left:100%; margin:0px;}
/***** sub menu item */
#nav ul.subnav li{width:222px; width:158px !important; padding:0px 25px 0px 39px; margin:0px; background:url(wim_nv_00000g8.png) 6px 0px repeat-y; text-align:left}
#nav ul.subnav li.top{width:222px; height:17px; line-height:17px; background:url(wim_nv_00000g6.png) 6px 0px no-repeat;}
#nav ul.subnav li.bottom{width:222px; height:18px; line-height:18px; background:url(wim_nv_00000g9.png) 6px 0px no-repeat;}
#nav ul.subnav li a:link{color:#FFFFFF;}
#nav ul.subnav li a:hover{color:#330066;}
#nav ul.subnav li a:visited{color:#FFFFFF;}

In HTML file add the code and edit it accordingly.

<div id="navBox" class="round">
<div id="nav">
<ul><li><a href="index.html">Item #1</a></li>
<li><a href="index.html">Item #2</a>
<ul class="subnav">
<li class="top"></li>
<li><a href="index.html">Item #2 - Sub Item #1</a></li>
<li><a href="index.html">Item #2 - Sub Item #2</a></li>
<li><a href="index.html">Item #2 - Sub Item #3</a></li>
<li><a href="index.html">Item #2 - Sub Item #4</a></li>
<li><a href="index.html">Item #2 - Sub Item #5</a></li>
<li><a href="index.html">Item #2 - Sub Item #6</a></li>
<li class="bottom"></li></ul></li>

<li><a href="index.html">Item #3</a>
<ul class="subnav">
<li class="top"></li>
<li><a href="index.html">Item #3 - Sub Item #1</a></li>
<li><a href="index.html">Item #3 - Sub Item #2</a></li>
<li><a href="index.html">Item #3 - Sub Item #3</a></li>
<li><a href="index.html">Item #3 - Sub Item #5</a></li>
<li class="bottom"></li></ul></li>
<li><a href="/en_GB/players/index.html">Item #4</a>

<ul class="subnav">
<li class="top"></li>
<li><a href="index.html">Item #4 - Sub Item #1</a></li>
<li><a href="index.html">Item #4 - Sub Item #2</a></li>
<li><a href="index.html">Item #4 - Sub Item #3</a></li>
<li><a href="index.html">Item #4 - Sub Item #4</a></li>
<li><a href="index.html">Item #4 - Sub Item #5</a></li>
<li class="bottom"></li></ul></li>
</ul>
</div></div>
Insert the Special cod

Test

Adjust Font Size:

+-R

Adjust Font Size:

+-R

Font: Display Block Fonts

The result is:

Adjust Font Size:

+-R

In CSS file write the following code:

.fontSize
{
float:left;
display:block;
width:14px;
height:14px;
margin:0px 3px;
background:#DED6E7;
text-align:center;
color:#330066;
font-size:12px;
}
a.fontSize
{
color:#330066;
text-decoration:none;
font-weight:bold;
}

In HTML file write the following code, add class="fontSize" in the anchor tag.

<a class="fontSize" href="http://www.blogger.com/a.html"> </a>
<a class="fontSize" href="http://www.blogger.com/b.html">-</a>
<a class="fontSize" href="http://www.blogger.com/c.html">R</a>