Different css for every <li> in main menu

[singular]

Hello to all great community here!

 

At the header menu, the html structure is:

 

<ul>

<li>menu item 1</li>

<li>menu item 2</li>

<li>menu item 3</li>

<li>menu item 4</li>

<li>menu item 5</li>

<li>menu item 6</li>

</ul>

 

I have 6 menu items and I want the first three to float left and the other three to float right, because I want to place the logo in the middle of the menu.

 

But I can not place css code, because each <li> must have a unique css class to select it.

 

How do I add for each <li> a different css class dynamically? For example:

 

<ul>

<li class="first">menu item 1</li>

<li class="second">menu item 2</li>

<li class="third">menu item 3</li>

<li class="fourth">menu item 4</li>

<li class="fifth">menu item 5</li>

<li class="sixth">menu item 6</li>

</ul>

 

In the "blocktopmenu.tpl" I have this code that generates the menu

 

<ul class="menu">

{$MENU}

 

Is there a way to tell it that every <li> that will be generated, to have its own unique css selector?

 

Thank you in advance!

Edited May 18, 2012 by singular (see edit history)

[coeos.pro]

Hi, have you try first-child in CSS : http://www.w3schools.com/cssref/sel_firstchild.asp

 

exemple : ul:first-child li {your code css}

 

else you must add "class" in the $MENU but it's not in smarty, in php

[singular]

Thank you for the quick reply!

 

I've tried this and also the li+li+li+li... in css with no success.

 

Can you tell me plese how to do this with php?

[coeos.pro]

where do you found this module ?

Edited May 18, 2012 by coeos.pro (see edit history)

[singular]

it came with this tempate that I have purchased:

 

http://addons.prestashop.com/en/food-drinks/4593-Prestashop-Cake-Shop---EGRTME5.html

[coeos.pro]

I thought it was a free module, the correct modules are always in smarty and not fully in php, ask to the webmaster if he can help you and if it can optimize a minimum this module

[singular]

Already contacted him! Thank you coeos.pro for the replies!

[mynamesStephanie]

why you do not create another one but same class.

[singular]

Can you please be more specific?

[mynamesStephanie]

<div class = "main-lain">
<div id = "1st-list">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>

<div id = center-logo>
<img src = "?######?">
</div>

<div id = 2nd-list>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
</div>
-----------------------CSS-----------
.main-lain
{width:900px; height:30px;}

#1st-list
{width:300px;height:30px;float:left;margin-left:0;position:absolute;display:inline;}

#2nd-list
{width:300px;height:30px;float:left;margin-left:0;position:absolute;display:inline;}

#center-logo
{width:300px;height:30px;float:left;margin-left:0;position:absolute;display:inline;}

Edited May 19, 2012 by mynamesStephanie (see edit history)

[mynamesStephanie]

just only a sample what i understand, or else attached the image sample of menu, what u mean