[NEVERMIND] CSS help needed - nested list issue
Posted: Mon Jul 16, 2007 12:59 pm
Ok, here is the deal. I have a nested list that I want to look like this on screen:
Group 1 would be the only item in the uppermost list to have descendent lists. Groups 2-4 would be single list items. The markup for this layout would derive from (unless there is a better way to do it):
Does anyone have any idea how I can go about this? I cannot seem to get my styles to work for nothing. I have tried a bunch of failures and was hoping someone could point me in the right direction. At the moment, I have this CSS:
#nav-container is a div that wraps the main UL. #nav is the parent UL. #nav-toc is the is the Group1 LI. #toc is the UL that wraps all of the Group1-SubX LI's. .section-header are the tertiary LI elements.
Code: Select all
Group1 | Group2 | Group3 | Group4
Group1-Sub1 | Group1-Sub2 | Group1-Sub3 | Group1-Sub4
* G1-S1-SS1 | * G1-S2-SS1 | * G1-S3-SS1 | * G1-S4-SS1
* G1-S1-SS2 | * G1-S2-SS2 | * G1-S3-SS2 | * G1-S4-SS2
* G1-S1-SS3 | * G1-S2-SS3 | * G1-S3-SS3 | * G1-S4-SS3
* G1-S1-SS4 | * G1-S2-SS4 | * G1-S3-SS4 | * G1-S4-SS4
* G1-S1-SS5 | * G1-S2-SS5 | | * G1-S4-SS5
* G1-S1-SS6 | * G1-S2-SS6 | | * G1-S4-SS6
* G1-S1-SS7 | * G1-S2-SS7 | | * G1-S4-SS7
| * G1-S2-SS8 | | * G1-S4-SS8
| * G1-S2-SS9 | |Code: Select all
<ul>
<li>Group1
<ul>
<li>Group1-Sub1
<ul>
<li>G1-S1-SS1</li>
<li>G1-S1-SS2</li>
<li>G1-S1-SS3</li>
<li>G1-S1-SS4</li>
<li>G1-S1-SS5</li>
<li>G1-S1-SS6</li>
<li>G1-S1-SS7</li>
</ul>
</li>
<li>Group1-Sub2
<ul>
<li>G1-S2-SS1</li>
<li>G1-S2-SS2</li>
<li>G1-S2-SS3</li>
<li>G1-S2-SS4</li>
<li>G1-S2-SS5</li>
<li>G1-S2-SS6</li>
<li>G1-S2-SS7</li>
<li>G1-S2-SS8</li>
<li>G1-S2-SS9</li>
</ul>
</li>
<li>Group1-Sub3
<ul>
<li>G1-S3-SS1</li>
<li>G1-S3-SS2</li>
<li>G1-S3-SS3</li>
<li>G1-S3-SS4</li>
</ul>
</li>
<li>Group1-Sub4
<ul>
<li>G1-S4-SS1</li>
<li>G1-S4-SS2</li>
<li>G1-S4-SS3</li>
<li>G1-S4-SS4</li>
<li>G1-S4-SS5</li>
<li>G1-S4-SS6</li>
<li>G1-S4-SS7</li>
<li>G1-S4-SS8</li>
</ul>
</li>
</ul>
</li>
<li>Group2</li>
<li>Group3</li>
<li>Group4</li>
</ul>Code: Select all
#nav-container {
background-color: #e8f1fb; /*deebff*/
border: 1px solid #57a9fd;
margin: 40px 10px;
}
#nav {
padding: 0;
list-style-position: outside;
list-style-type: none;
list-style-image: none;
height: 30px;
}
#nav li {
display: block;
float: left;
width: 200px;
min-width: 200px;
max-width: 200px;
}
#nav li#nav-toc ul#toc {
position: relative;
top: 20px;
float: left;
list-style: none;
width: 100%;
border: 1px solid #f00;
}
#nav li#nav-toc ul#toc li.section-header {
display: block;
float: left;
width: 200px;
min-width: 200px;
max-width: 200px;
border: 1px solid #0f0;
}