Editing One <li>

Hello,

I am looking to just edit the home <li> on my blog (http://www.outplaypoker.com/poker-tips). I need to add the following code:

border-bottom-left-radius: 8px 8px;
border-bottom-right-radius: 0px 0px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 0px 0px;

PHP:

Right now I have it as:

.menu-header-menu-container #menu-item-4 li:hobver {
border-bottom-left-radius: 8px 8px;
border-bottom-right-radius: 0px 0px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 0px 0px;
}

PHP:

Any suggestions on how to fix it?

Best Regards,
Nick

 

instead of hobver try hover

 

hah sorry that was a DP mistake... I have it saying hover in the actual code...

 

OK, here is the code that worked. I can now see the code in the editor, but the <li> still doesn't have curved borders?

.menu-header-menu-container ul li.menu-item-4 a:hover {
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
}

PHP:

Any Ideas?

 

If you have the <li> tags defined in a style sheet i.e.

        li
         {
           border-bottom-left-radius: 8px 8px;
           border-bottom-right-radius: 0px 0px;
           border-top-left-radius: 8px 8px;
           border-top-right-radius: 0px 0px;
          }

Code (markup):

You can add a style to an individual li tag on the document i.e.

    
            <ul>
                  <li style=" border-top-right-radius: 20px 20px;font-family:Tahoma;">some stuff goes in here</li>
                  <li>some stuff goes in here</li>
                  <li>some stuff goes in here</li>
                  <li>some stuff goes in here</li>
            </ul>

Code (markup):

The inline styling will over ride the style defined in the style sheet. If you only change one thing at the inline level the rest will be styled by the style sheet.

 

You could also use a class for that list item.

<li class="[I]MyClass[/I]"> Text</li>

Code (markup):

On the stylesheet:

.MyClass
          {
           border-bottom-left-radius: 8px 8px;
           border-bottom-right-radius: 0px 0px;
           border-top-left-radius: 8px 8px;
           border-top-right-radius: 0px 0px;
          }

Code (markup):