Here is the fiddle provided below:
http://jsfiddle.net/Fx9rA/
<div id="wrap">
<ul id="accordion">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul id="accord">
<li>
<a href="#" class="history_heading" rel="history_heading">HISTORY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
</div>
My issue occurs when hovering over the first tab CMT, the block that displays history and geography lists shifts to the right instead of the left side. I have limited knowledge of CSS and can't figure out where the problem lies. Any assistance would be greatly appreciated.
#wrap {
margin-left: 5px;
margin-top: 5px;
width: 100px;
}
#accordion {
width: 200px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
#accordion h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
#accordion h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
#accordion li div.content {
display: none;
padding: 5px;
background: #f6f7e7;
/*border: 1px solid #ddd;*/
}
#accordion li:hover div.content {
border-bottom: 1px solid #ddd;
display: inherit;
}
#accordion li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
#accord > li {
padding-left: 5px;
list-style-type: none;
}
#accord > li > ul {
list-style-type: none;
}
#accord a {
padding: 5px;
}