Hello all,
I am a new member of this group but not an old hand at programming
having been a developer for more than 25 years. Relatively CSS is new
to me - barely a few months of self learning.
I have grown a little ambitious now and would like to design a menu
for a webpage.
The menu will be vertically oriented with upto 5 levels of nesting.
As of now, I have defined the following simple HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Untitled</title>
<link rel='stylesheet' type='text/css' href='styles/DA_overall.css'/>
</head>
<body>
<table border="1" cellpadding="3" cellspacing="3" summary="just
checking">
<tbody>
<tr><th>Level 1</th><th>Level 2</th><th>Level 3</th><th>Level 4</
th><th>Level 5</th></tr>
<tr>
<td div class="level_1">Option 1</td></tr>
</tr>
<tr>
<td div class="level_1">Option 2</td>
<td div class="level_2">Option 2 Sub option 1</td>
<td div class="level_3">Option 2 Sub option 2</td>
<td div class="level_4">Option 2 Sub option 3</td>
<td div class="level_5">Option 2 Sub option 4</td>
</tr>
</tbody>
</table>
</body>
</html>
--------------
As would be evident it is a two row table plus a top row of headers
with 5 columns. In row 1, I have I have only 1 cell "Option 1". In
row 2, I have 5 cells "Option 2", "Option 2 Sub option 1" thru "Option
2 Sub option 4".
In the normal mode, only the cells Option 1 and Option 2 are supposed
to be visible (and this happens). All sub options are NOT visible.
However, when I hover the mouse on top of Option 2, I would like that
all Sub options 1 thru 4 should be visible. I am unable to do that
and I seek your help here. My CSS file is appended below.
body {
font-family: sans-serif;
}
table {
border: 1px solid rgb(100, 100, 100);
caption-side: bottom;
width: 40%;
}
th {
background: #C69831;
font: 14px sans-serif;
font-color: #FFFFFF;
}
th {
border: 1px solid rgb(100, 100, 100);
padding: 2px;
}
td {
background: #90783E;
font-color: #FFFFFF;
}
td {
border: 1px solid rgb(100, 100, 100);
padding: 2px;
}
div {
font: 10px sans-serif;
}
.level_1 {
font: 10px sans-serif;
background-color: #7D5D0F;
color: #000000;
} /* Level 1 menu */
.level_2 {
font: 10px sans-serif;
background-color: #90783E;
color: #000000;
visibility:hidden;
} /* Level 2 menu */
.level_3 {
font: 10px sans-serif;
background-color: #C0952E;
color: #000000;
visibility:hidden;
} /* Level 3 menu */
.level_4 {
font: 10px sans-serif;
background-color: #E0BA60;
color: #000000;
visibility:hidden;
} /* Level 4 menu */
.level_5 {
font: 10px sans-serif;
background-color: #E0C482;
color: #000000;
visibility:hidden;
} /* Level 5 menu */
.level_1:hover
{
background-color: #84DFC1;
text-decoration: underline;
}
.level_2:hover
{
background-color: #84DFC1;
text-decoration: underline;
}
.level_3:hover
{
background-color: #84DFC1;
text-decoration: underline;
}
.level_4:hover
{
background-color: #84DFC1;
text-decoration: underline;
}
.level_5:hover
{
background-color: #84DFC1;
text-decoration: underline;
}
THANK YOU IN ADVANCE
Uttam
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
