how to target a div from another list

Question

hope all of you are doing fine..

first of all, really thank you for this great website.. it solved plenty of problems I faced by just searching for it..

now the problem I'm facing right now and I couldn't have the solution by my effort nor by searching here and google.. I'm basicly new to css, but I've learned the basic (hopefully).. I have tabular navigation aside with another side list of links..please check the image: http://www.tiikoni.com/tis/view/?id=90b0b93

what I want is, when the user enters the page, the left list shouldn't be visible.. when the user hits the red "A" (which is red because it's activated), the left list displayed..then, when he choose one of the list (let's say First), the blue area should show specific content (the last action I made right ).. I managed to keep it hidden, but it doesn't show when I his "A".. the code I used is bellow:

getting in mind two things, the page is design as a table, so the left list is in a cell separated from the cell where blue tabular nav is.. second this, I'm trying to not use jQuery or any other script other than css..

tabs.css

    .tabs
{
    position:relative;
    text-align:left; 
...........    
}
.tabs ul.menu
{
    list-style-type:none;
    display:inline; 
.........
}
.tabs ul.menu > li
{
    display:inline;
    float:none; 
  ........   
}
.tabs > ul.menu > li >  a
{
    color: #580000; /* tabs titles */
    text-decoration:none;
    display:inline-block;
........    
}

.tabs ul.menu > li > a:hover
{     
    color: white;   
    cursor:hand;     
}
.tabs ul.menu li > div
{    
    display:none;
    position:absolute;
     .........         
}
/*.tabs ul.menu > li > div > p
{
    border:1px solid #f1f3f4;      
    background-color: #f5f9fc;  
   ........

}  */
.tabs ul.menu > li > a:focus
{  
    color: #f5f9fc;  

}

.tabs ul.menu > li:target > a
{
    cursor:default;
         /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#8A0808));

.......
}

.tabs ul.menu li:target > div
{
    display:block;
}

myTable.css

.myLeft
{

    text-align:left; /* This is only if you want the tab items at the center */          
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position:relative;
    display: none;
..........    
}
.myLeft:target
{

    text-align:left; /* This is only if you want the tab items at the center */          
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position:relative;
    display: block;
    visibility:visible;
........

}
.myLeft > ul.menuLeft
{
    list-style-type:none;
    display:inline; /* Change this to block or inline for non-center alignment */      
    .........
}
.myLeft > ul.menuLeft > li
{
    display:inline;
    float:none; 
........    
}
.myLeft > ul.menuLeft > li >  a
{
    color: #580000; /* #7a7883;  /* tabs titles */
    text-decoration:none;
    display:block;
........
}

.myLeft > ul.menuLeft > li > a:hover
{     
    color: white;   
    cursor:hand;     
}
.myLeft > ul.menuLeft > li > div
{    
    display:none;
    position:absolute;
     ........        
}

.myLeft > ul.menuLeft > li > a:focus
{  
    color: #f5f9fc;  

}

.myLeft > ul.menuLeft > li:target > a
{
    cursor:default;
.........  
}
.myLeft > ul.menuLeft > li:target > div
{
    display:block;
}

content of the tabular stuff:

 <div class="tabs"  style="height:300px;"> <!-- Tabs --> 
  <ul class="menu">
    <li id="item-1"> <!-- item-1 -->        
      <a href="#left-1"> A </a> 
         <div id="#item-1"> 
               .............

content of the left list:

<div id = "#left-1" class="myLeft"  <!-- Tabs --> 
      <ul class="menuLeft">
        <li> <!-- item-1 -->
          <a href="#item-1"> FIRST </a>
        </li>
        <li> <!-- item-1 -->
          <a href=""> Second </a>
        </li>
        <li> <!-- item-1 -->
          <a href=""> Thired </a>
        </li>

sorry for long thread and thank you in advanced ..

Answer 1

I got the answer of the above LONG question.. simply, name the whole iv of the left list without using hash-tag before it.. not only the link.. like below:

<div id = "left-1" class="myLeft"  style="height:300px; "> <!-- Tabs --> 
      <ul class="menuLeft">
                <li> <a class="alLink" href="#item-1">our meetings</a> </li> 
.......

now I've got another three issues :"( first, the page moves when this left list appear.. second, I want the upper links (the one when you click on them opens the left list) to be highlighted when the left links is displayed.. this could only be done by iding them same as the left links.. but in this case it won't work properly.. I think this could be solved by using jQuery.. third, when I hit the first links of the left list, the blue box in the middle should changed while this left list still there.. it just disappear!!

If anyone has any suggestions, please let me know..

thank you..