please check this link http://www.sudhakargolakaram.co.in/files/menu.html

the width of the menu is 955px

as per the image i need to space each list item on the left and right differently and the spacing varies for each link based on the number of letters also i need to increase the font size of the links

how can i space each of the links so that they appear as per the image with different spacing for each link

also i need a dropdown menu for each of these links and the width of each of the dropdown links should be same as the width of a particular link and the widths are different

The menu and the image seems to be identical, more or less. I don't see what the problem is What exactly are you trying to do?

Are you trying to center the text inside their boxes? If so, use text-align: center;

i have updated the file

i have fixed the menu and i also have a drop down menu both are working fine
however when i hover on the links due to the dropdown menu the content after this menu and dropdown menu are being pushed down how to keep the content where it is when hovering on the links and when the dropdown menu appears

http://www.sudhakargolakaram.co.in/files/menu.html

You'll have to use absolute positioning.

Give the parent item (the <li> tag) position:relative;, then let the sub menu (the <ul> tag) have position:absolute;.

thanks