For a website design, I am making a navigation bar which will sit on top, allowing users to have a quick view of what the site offers. In the picture below I show the problem graphically
#navBar {
position:absolute;
top: 140px;
left: 460px;
width: 980px;
height: 200px;
background-color: rgb(246, 246, 246);
overflow:hidden;
}
li {
list-style: none;
}
.navButton {
position: absolute;
top: 65px;
left: 0px;
width: 350px;
height: 75px;
background-color:rgb(18, 65, 91);
color: white;
margin-left: 0px;
display:inline-block;
text-align: center;
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(310deg);
-webkit-transform-origin: 50% 50%;
font-weight: bold;
}
div span {
position: relative;
top: 15px;
font-size: 29px;
}
.navButton:nth-of-type(1):before {
content:"";
position:absolute;
height:170px;
width:350px;
background-color:rgb(18, 65, 91);
top:-165px;
left:-50px;
}
.navButton:nth-of-type(8):after {
content:"";
position:absolute;
height:170px;
width:350px;
background-color:rgb(18, 65, 91);
top:65px;
left:50px;
}
div span {
position: relative;
top: 15px;
font-size: 29px;
}
.buttonContent {
position: absolute;
right: 200px;
top: 50px;
background-color: #F2F2F2;
width: 300px;
visibility: hidden;
}
.buttonContent a {
text-decoration: none;
color: black;
font-weight: bold;
}
.buttonContent a:hover {
color: rgb(18, 65, 91);
}
.navButton:hover > .buttonContent {
visibility: visible;
}
</style>
<div id="navBar" style="">
<table>
<tr>
<td>
<ul>
<li>
<div class="navButton" style="left:-40px;"> <span> Getting Started </span>
<div class="buttonContent"> <a href="#"> More about Partner Portal</a>
</br> <a href="#"> Discover 3DSWYM</a>
</br>
</div>
</div>
<div class="navButton" style="left:70px;"><span> Our Solutions </span>
<div class="buttonContent"> <a href="#"> Industry Sales Kits</a>
</br> <a href="#"> Brand Sales </a>
</br> <a href="#"> Other Product Lines </a>
</br> <a href="#"> Discover R2014x</a>
</br> <a href="#"> Discover R2014x</a>
</br> <a href="#"> Packagin & Portfolio 2014x</a>
</br>
</div>
</div>
<div class="navButton" style="left:180px;"><span> Sales </span>
<div class="buttonContent"> <a href="#">Agreements & Policies</a>
</br> <a href="#">Pricing</a>
</br> <a href="#">Online Services</a>
</br> <a href="#">3DEXPERIENCE Platform</a>
</br> <a href="#">Sales Support R2014x</a>
</br>
</div>
</div>
<div class="navButton" style="left:290px;"><span> Marketing </span>
<div class="buttonContent"> <a href="#">Marketing R2014x</a>
</br> <a href="#">Marketing & Communication</a>
</br> <a href="#">Campaigns in-a-box</a>
</br> <a href="#">Marketing Online Services </a>
</br> <a href="#">Branding Materials</a>
</br> <a href="#">Solutions Partner Labels</a>
</br>
</div>
</div>
<div class="navButton" style="left:400px;"><span> Customer Support
</span>
<div class="buttonContent"> <a href="#">Our Mission</a>
</br> <a href="#">Roles & Responsibilities</a>
</br> <a href="#">Support Resources</a>
</br> <a href="#">Dassault Systemes Partners Support Tool</a>
</br>
</div>
</div>
<div class="navButton" style="left:510px;"><span> Training </span>
<div class="buttonContent"> <a href="#"> Training Programs</a>
</br>
</div>
</div>
<div class="navButton" style="left:620px;"><span> Technical Resources </span>
<div class="buttonContent"> <a href="#">Pre-Sales Support R2014x</a>
</br> <a href="#">VS Sales KickOff 2014 Presentations</a>
</br> <a href="#">V6 Deployment Optimizations</a>
</br> <a href="#">Dsx.client Portal</a>
</br> <a href="#">3DSWYM Communities</a>
</br>
</div>
</div>
<div class="navButton" style="left:730px;"><span> Contact Us </span>
</div>
</li>
<li></li>
</ul>
</td>
</tr>
</table>
</div>
So i used the modified version that @BeatAlex helped me with, The fiddle is below
Now as you can see, there is the div-class: 'buttonContent', which appears below each respective navButton is now hidden due to the overflow hidden property
