sticky roll overs - two problems with a layout

[artdog]

I have a home page for a site posted at www.artdog.adslink.cz/ecp. I will post my css below.

The first problem involves the rollovers on the left side. I need them to stick on after the user has rolled off until another of the nav items is rolled over. I can't figure out how to do that.

The second problem is more involved. The main text areas are absolutely positioned layers that turn on and off with the rollovers. This works fine but I want these layers to be in the document flow so the main content div will expand if more text is added to one or more of the layers. I think there is a way to set up the layout so this would be possible but I have spent many hours at it and can't think of a way.

Any help on either of these two issues would be very much appreciated.

Code: Select all

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #dbdbdb;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
}
#wrapper {
    background-image: url(images/shadow-sides.jpg);
    background-repeat: repeat-y;
    width: 825px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}
#content {
    background-color: #FFFFFF;
    height: auto;
    width: 800px;
    margin-left: 14px;
    overflow: auto;
}

#header {
    height: 73px;
    background-image: url(images/home-header.jpg);
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #8e8d8d;
}
#header #topnav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    width: 170px;
    height: 13px;
    float: right;
    margin-right: 40px;
    margin-top: 22px;
    color: #FFFFFF;
}
#topnav a:link {
    color: #FFFFFF;
    text-decoration: none;
}
#topnav a:visited {
    color: #FFFFFF;
    text-decoration: none;
}
#topnav a:hover {
    color: #FFCC00;
    text-decoration: none;
}
#content #flash {
    height: 171px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #8e8d8d;
}
#content #bottom {
    height: auto;
}

#navheader {
    padding-top: 18px;
    margin-bottom: 8px;
}
#footer {
    background-color: #0F5384;
    height: 10px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
#bottom #right {
    background-color: #FFFFFF;
    float: right;
    width: 170px;
    margin-right: 10px;
}
#right #contactbox {
    border: 1px solid #e1d299;
    margin-top: 10px;
    margin-bottom: 10px;
}
.hometabhead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #4D7CC4;
}
#tabtext {
    margin-bottom: 25px;
}
#smallital {
    font-size: 8pt;
    font-style: italic;
    line-height: 10pt;
    width: 350px;
    margin-left: 30px;
    margin-bottom: 10px;
}
#tabtext #tablink {
    margin-bottom: 15px;
    margin-left: 30px;
}
#tabtext #tablink a:link {
    color: #666666;
    font-weight: bold;
    text-decoration: none;
    font-size: 8pt;

}
#tabtext #tablink a:visited {
    color: #666666;
    font-weight: bold;
    text-decoration: none;

}
#tabtext #tablink a:hover {
    color: #FFCC00;
    font-weight: bold;
    text-decoration: none;

}
ul{ margin:0; padding:0 0 0 25px; }

li{ margin:0; padding:0; }#homenav {
    background-color: #f5f5f5;
    width: 208px;
    height: 490px;
}
#navbut {
    height: 22px;
    padding-top: 8px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

#navbut:hover {
    background-color: #FFFFFF;
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
}
#bottom #aboutmain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: visible;
}
#bottom #ecmmain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom #dcsmain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom #ismain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom #bpmmain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom #bomain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom #msmain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom #partnersmain {
    width: 360px;
    position: absolute;
    left: 400px;
    top: 300px;
    height: 88px;
    visibility: hidden;
}
#bottom  p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    line-height: 15pt;
}
li.desc {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    line-height: 18pt;
    list-style: url(images/yellow-bullet.gif);
}
#intsolbox {
    border: 1px solid #5c72ab;
}
#intsolbox #hdr {
    height: 18px;
    background-color: #5c72ab;
    padding-top: 4px;
}
#intsolbox li {
    list-style: url(images/blue-bullet.gif);
    line-height: 18px;
    color: #666666;
    font-weight: bold;
}
#intsolbox ul {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}
#graphicbox {
    margin-top: 10px;
    margin-bottom: 10px;
}
#graphicbox #hdr {
    background: #5c72ab;
    height: 14px;
}