CSS3 link tab HBO
HBO link tab/ problems with IE 10
HTML
<div class="testdiv">
asdasdasd
</div>
<br/>
<br/>
<div class="linkBar">
View related links/PDFS.
<ul class="links">
<li><span class="lStar">★</span> <a href="pdf/small/S-1.pdf" target="blank">Compliance Corner April</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-2.pdf" target="blank">FLSA with plans</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-3.pdf" target="blank">Guidance for Notice of Employees Coverage</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-4.pdf" target="blank">HAHU Stability Periods</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-5.pdf" target="blank">MEC vs MV Slides Final</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-6.pdf" target="blank">Notice of Marketplace-Exchange</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-7.pdf" target="blank">Small Bus Tax credit rule</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/Employers-1-Healthcare Audits Alert.pdf" target="blank">Healthcare Audits Alert</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/Employers-2-ERISA Penalties on the Horizon.pdf" target="blank">ERISA Penalties on the Horizon</a></li>
</ul>
</div>
<div class="linkBar2">
View related links/PDFS.
<ul class="links2">
<li><span class="lStar">★</span> <a href="pdf/small/S-1.pdf" target="blank">Compliance Corner April</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-2.pdf" target="blank">FLSA with plans</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-3.pdf" target="blank">Guidance for Notice of Employees Coverage</a></li>
<li><span class="lStar">★</span> <a href="pdf/small/S-4.pdf" target="blank">HAHU Stability...
CSS
/* Link Bar Styles */
.linkBar {
position: absolute;
top: 0;
left: 10px;
background: #2b2b2b;
color: #fff;
height: 30px;
width: 200px;
padding: 5px;
line-height: 30px;
text-align: center;
cursor: pointer;
z-index: 1000;
border: 2px solid #0c5b78;
border-radius: 0 0 3px 3px;
}
.links {
position: relative;
left: -7px;
top: 5px;
width: 205px;
height: auto;
display: none;
background: #c7c7c7;
border-left: 2px dashed #dc9927;
border-right: 2px dashed #dc9927;
border-top: 2px solid #0c5b78;
z-index: 900;
list-style-type: none;
text-align: left !important;
padding: 0 0 25px 5px;
margin: 0;
cursor: default;
}
.links:before {
content: "";
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 25px solid rgba(255, 255, 255, 0.77);
bottom: 0;
left: 0;
position: absolute;
}
.links a {
color: #1b1b1b;
}
.links a:hover {
color: #0c5b78;
background: none;
box-shadow: none;
text-decoration: underline;
}
.lStar {
color: #dc9927;
text-shadow: 0 -1px 0 #000;
}
/* Link Bar2 Styles */
.linkBar2 {
position: absolute;
top: 0;
left: 250px;
background: #2b2b2b;
color: #fff;
height: 30px;
width: 200px;
padding: 5px;
line-height: 30px;
text-align: center;
cursor: pointer;
z-index: 1000;
border: 2px solid #0c5b78;
border-radius: 0 0 3px 3px;
}
.links2 {
position: relative;
left: -7px;
top: 5px;
width: 205px;
height: auto;
display: none;
background: #c7c7c7;
border-left: 2px dashed #dc9927;
border-right: 2px dashed #dc9927;
border-top: 2px solid #0c5b78;
z-index: 900;
list-style-type: none;
text-align: left !important;
padding: 0 0 25px 5px;
margin: 0;
cursor: default;
}
.linkTri {
display: block;
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 25px solid rgba(255, 255, 255, 0.77);
bottom: 0;
left: 0;
position: absolute;
}
.links2 a {
color: #1b1b1b;
}
.links2 a:hover {
color: #0c5b78;
background:...
JavaScript
$('.linkBar').on('click', function() {
$('.links').slideToggle('1500');
});
$('.linkBar2').on('click', function() {
$('.links2').slideToggle('1500');
});