data-theme not working on navbar. jQuery Mobile

Question

I am having issues applying theme on a navbar using Jquery mobile. no matter whatever theme I apply the navbar is set to default theme. Here is the attached code

<div data-role="navbar" style="width: 80%; padding: 2% 10%;" data-theme="b">
    <ul>
        <li><a href="#" class="ui-btn-active ui-corner-left">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#" class="ui-corner-right">Three</a></li>
   </ul>
</div>

is there anything I am doing wrong here. I just copied the code from there website.

Answer 1

Applying a theme to the navbar container is not supported and it will inherit the theme of the navbar's parent container.If you want to apply a theme to the navbar you can specify a data-theme to the individual items in the navbar.Something like this

<div data-role="navbar" style="width: 80%; padding: 2% 10%;">
  <ul>
     <li><a href="#" class="ui-btn-active ui-corner-left" data-theme="e">One</a</li>
     <li><a href="#" data-theme="e">Two</a></li>
     <li><a href="#" class="ui-corner-right" data-theme="e">Three</a></li>
  </ul>
</div>

A demo here - http://jsfiddle.net/PyyUy/

Edit-Answer for how to give a hover color

If you want to give a hover color you can use the following CSS

.ui-navbar li a:hover{
            background:red !important;
        }

Updated fiddle - http://jsfiddle.net/PyyUy/1/