Question

how to make the links in the cube to break into two line
i tried giving the br tag between two words in the cube

http://jsfiddle.net/VXXPC/23/embedded/result/

<div style="height: 65px;">
          <div style="padding-bottom:14px;">
            <nav style="margin-left: 362px;">
                <a class="soCube" href="/html/">Customer Profile</a>
                <a class="poCube" href="/css/">SO</a>
                <a class="bomCube" href="/js/">Quote</a>
                <a class="rmaCube" href="/jquery/">Invoices</a>
                <a class="onOrderCube" href="/html/">Credit Memo</a>
                <a class="onHandCube" href="/html/">RMA</a>
                <a class="allocatedCube" href="/html/">Open AR</a>
                <a class="shippedCube" href="/html/">Payment</a>
            </nav>
          </div>
      </div>

Answer 1

How about changing it a bit and putting it into a list?

<div class="container">
    <div style="height: 100px;">
        <div style="padding-bottom:14px;">
            <nav style="margin-left: 10px;">
                <ul>
                    <li class="soCube"><a href="/html/">Customer<br>Profile</a></li>
                    <li class="poCube"><a href="/css/">SO</a></li>
                    <li class="bomCube"><a href="/js/">Quote</a></li>
                    <li class="rmaCube"><a href="/jquery/">Invoices</a></li>
                    <li class="onOrderCube"><a href="/html/">Credit<br>Memo</a></li>
                    <li class="onHandCube"><a href="/html/">RMA</a></li>
                    <li class="allocatedCube"><a href="/html/">Open<br>AR</a></li>
                    <li class="shippedCube"><a href="/html/">Payment</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

And then styling:

nav li{
display: table;
float:left;
margin-right: 10px;
height: 60px;
}

nav a{
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    font-family: verdana;
    font-size: 11px;
    color: white;    
}
nav {
  padding-bottom: 5px;
  padding-top: 5px;

}
.soCube{
  color: white;
  background-color: #999933;
}
.poCube{
  color: white;
  background-color: #669900;
}
.bomCube{
  color: white;
  background-color: #cc3300;
}
.rmaCube{
  color: white;
  background-color: #e8690b;
}

.onOrderCube{
  color: white;
  background-color: #663366;
}
.onHandCube{
  color:white;
  background-color: #669900;
}
.allocatedCube{
  color:white;
  background-color: #cc3300;
}
.shippedCube{
  color:white;
  background-color: #009999;
}
.costCube{
  color:white;
  background-color: #3366cc;
}
.priceCube{
  color: white;
  background-color: #ff6600;
}

I modified some of your dimensions, so I could tweak it better, but you can get the idea.

Here is the fiddle JsFiddle