Using TABS in Hueman theme

I managed to use TABS after copying and adapting code from the tabbed widget in the theme. Here is what I am using:

<ul class="alx-tabs-nav group tab-count-3">
							<li class="alx-tab tab-one active"><href="#tab-one">TAB ONE</a></li>
							<li class="alx-tab tab-two"><a title="" href="#tab-two">TAB TWO</a></li>
							<li class="alx-tab tab-three"><a title="" href="#tab-three">TAB THREE</a></li>
						</ul>

<-- You need to put the tab-count to the no. of tabs you are using -->

<div class="alx-tabs-container">
<ul class="alx-tab group" id="tab-one">content</ul>
<ul class="alx-tab group" id="tab-two">content</ul>
<ul class="alx-tab group" id="tab-three">content</ul>
</div>

Here’s the css I’m using:

.entry ul.alx-tabs-nav, .entry ul.alx-tab {
	margin: 0 0 15px;
}

.entry ul.alx-tabs-nav {
	border-bottom: 3px solid #3399CC;
	margin: 0 0px;
}

.alx-tabs-nav li {
	background: #E0F0F8;
}

.alx-tabs-nav li a:hover, .alx-tabs-nav li a:active {
	background: #3b8dbd;
	color: #fff;
}

.alx-tabs-container {
	padding: 5px 20px;
	background: #fafafa;
}

.alx-tab a { -webkit-transition: none; -moz-transition: none; transition: none; }

The problem I’m facing is that the color of the NAV changes on mouse hover but not when it’s active, though my css specifies in both conditions (nav-li: hover and nav-li:active).

And I can’t seem to stack the titles on smaller screen sizes.