Styliser le menu en onglets javascript

<!doctype html>
 
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style type="text/css">
.compte{
background-image:url('img/boutmsg.png');
background-size:100%;
background-repeat:no-repeat;
height:100%;
}

.chat{
background-image:url('img/boutmsg.png');
background-size:100%;
background-repeat:no-repeat;
height:100%;
}

.deconnexion{
background-image:url('img/boutmsg.png');
background-size:100%;
background-repeat:no-repeat;
height:100%;
}

li{
height:100%;
}

.ui-tabs .ui-tabs-nav li {
width: 300px; /* ICI TU METS LA LARGEUR DES ONGLETS */
}
</style>
</head>

<body>
		
		<script>
  $(function() {
    $('#onglets').tabs();
  });
</script>

		<div id="onglets" style="height:80% !important;">
  <ul style="height:45px !important:">
    <li><a class="compte" href="#compte"></a></li>
    <li><a class="chat" href="#chat"></a></li>
    <li><a class="deconnexion" href="#deconnexion"></a></li>
  </ul>
  <div id="compte" style="background-color:#212121;">
COMPTE
  </div>
  <div id="chat">
CHAT
  </div>
  <div id="deconnexion">
DECONNEXION
  </div>
</div>
		
</body>
</html>