Jquery ui 数据主题在导航栏上不起作用。jquerymobile

我在使用Jquery mobile在导航栏上应用主题时遇到问题。无论我应用什么主题，导航栏都设置为默认主题。这是附加的代码

<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>

---

这里有什么我做错的吗。我刚刚从那里的网站复制了代码。

不支持将主题应用于导航栏容器，它将继承导航栏父容器的主题。如果要将主题应用于导航栏，可以为导航栏中的各个项目指定数据主题。类似这样的操作

<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>

---

更新的小提琴-

谢谢。。它工作得很好。顺便说一句，你知道我是否可以使用现有主题更改按钮的悬停颜色？请查看更新的答案。如果你认为问题已得到回答，请将答案标记为已接受。导航栏仅支持5个列表元素。如果我尝试放置第6个list元素，那么将整个ul划分为三行。要在一行中显示6项，我必须做什么？

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