Untitled

<html>
<head>
<style>
#rightbox {
width: 300px;
height: 500px;
float: left;
background-color: yellow;
}

#leftbox {
width: 100px;
height: 500px;
float: left;
background-color: red;
}

.subname {
background-color: green;
}

.subname:hover div{
padding: 3px;
background-color: #CCCCCC;
border-radius: 5px;
display: block;
position: absolute;
margin: -20px 0 0 60px;
z-index: 100;
float: left;
opacity: 0.5;
}

.subpath {
display: none;
}
</style>
</head>
<body>
<div id="leftbox">
  <div class="subname">
   Cats
   <div class="subpath">/category/cats</div>
  </div>
  <div class="subname">
   Dogs
   <div class="subpath">/category/dogs</div>
  </div>
  <div class="subname">
   Other Animals
   <div class="subpath">/category/other</div>
  </div>
</div>
<div id="rightbox">
lore ipsum
</div>
</body>
</html>