You are better off coding the HTML using ul (list elements ) for the navigation. It is more semantic and easier to format via CSS
"Uttam" <[email protected]> wrote: >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] -- Sent from my Android phone with K-9 Mail. Please excuse my brevity. -- -- 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]
