graphic <li> menu problem

  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: India

Post 3+ Months Ago

Hi to all,

I am developed Graphic <li> menu, it's working fine in one level drop down , when I had another sub level Getting Problem.

Can any one help me.

Here is the code:
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1; 
    z-index: 100;
}

#nav a {
    display: block;
    width: 158px;
    z-index: 100;
}

#nav li { /* all list items */
    float: left;
    width: 158px; /*width needed or else Opera goes nuts */
        position: relative;
    padding: 0;
    z-index: 100;
}

#nav li ul { /*second-level lists */
    position: absolute;
    background: #fff;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    width: 164px;
    left: -999em; /*using left instead of display to hide menus because display: none isn't read by screen readers */
    z-index: 100;
}

#nav li ul a {
    padding: 0 0 0 5px;
    /*background-padding: 20px;*/
    border-right: solid 1px #ccc;
    background-color: #f5f5f5;
}

#nav li:hover ul, #nav li.sfhover ul{ /* lists nested under hovered list items */
    left: 158px;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: 100;
}

#nav {
    clear: left;
    z-index: 100;
}

/* Nav Rollovers */

</style>
</head>

<body>
<ul>
<li><a class=rollover id=left_003 href="http://localhost:7384/transfusional-iron-overload.jsp"><img alt="transfusional iron overload" src="overload_files/transfusional_iron_overload.gif" border=0></a>
            <ul>
                <li><a class=rollover id=left_003_001 href="http://localhost:7384/underlying_conditions.jsp"><img alt="underlying conditions" src="overload_files/underlying_conditions.gif" border=0></a> </li>
                <li><a class=rollover id=left_003_002 href="http://localhost:7384/blood-transfusion-therapy.jsp"><img alt="improving transfusions" src="overload_files/optimizing_transfusions.gif" border=0></a>
                    <ul>
                        <li><a class=rollover id=left_003_002_001 href="http://localhost:7384/thalassaemia.jsp"><img alt=thalassemia src="overload_files/in_thalassemia.gif" border=0></a> </li>
                        <li><a class=rollover id=left_003_002_002 href="http://localhost:7384/sickle_cell_anemia.jsp"><img alt="sickle cell anemia" src="overload_files/in_sickle_cell.gif" border=0></a> </li>
                        <li><a class=rollover id=left_003_002_003 href="http://localhost:7384/myelodysplastic_syndrome.jsp"><img alt="myelodysplastic syndrome" src="overload_files/in_myledysplastic.gif" border=0></a></li>
                    </ul>
                </li>
            </ul>
        </li>
        </ul>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. <style>
  8. #nav, #nav ul { /* all lists */
  9.     padding: 0;
  10.     margin: 0;
  11.     list-style: none;
  12.     line-height: 1; 
  13.     z-index: 100;
  14. }
  15. #nav a {
  16.     display: block;
  17.     width: 158px;
  18.     z-index: 100;
  19. }
  20. #nav li { /* all list items */
  21.     float: left;
  22.     width: 158px; /*width needed or else Opera goes nuts */
  23.         position: relative;
  24.     padding: 0;
  25.     z-index: 100;
  26. }
  27. #nav li ul { /*second-level lists */
  28.     position: absolute;
  29.     background: #fff;
  30.     border-top: solid 1px #ccc;
  31.     border-bottom: solid 1px #ccc;
  32.     width: 164px;
  33.     left: -999em; /*using left instead of display to hide menus because display: none isn't read by screen readers */
  34.     z-index: 100;
  35. }
  36. #nav li ul a {
  37.     padding: 0 0 0 5px;
  38.     /*background-padding: 20px;*/
  39.     border-right: solid 1px #ccc;
  40.     background-color: #f5f5f5;
  41. }
  42. #nav li:hover ul, #nav li.sfhover ul{ /* lists nested under hovered list items */
  43.     left: 158px;
  44.     top: 0;
  45.     padding: 0;
  46.     margin: 0;
  47.     z-index: 100;
  48. }
  49. #nav {
  50.     clear: left;
  51.     z-index: 100;
  52. }
  53. /* Nav Rollovers */
  54. </style>
  55. </head>
  56. <body>
  57. <ul>
  58. <li><a class=rollover id=left_003 href="http://localhost:7384/transfusional-iron-overload.jsp"><img alt="transfusional iron overload" src="overload_files/transfusional_iron_overload.gif" border=0></a>
  59.             <ul>
  60.                 <li><a class=rollover id=left_003_001 href="http://localhost:7384/underlying_conditions.jsp"><img alt="underlying conditions" src="overload_files/underlying_conditions.gif" border=0></a> </li>
  61.                 <li><a class=rollover id=left_003_002 href="http://localhost:7384/blood-transfusion-therapy.jsp"><img alt="improving transfusions" src="overload_files/optimizing_transfusions.gif" border=0></a>
  62.                     <ul>
  63.                         <li><a class=rollover id=left_003_002_001 href="http://localhost:7384/thalassaemia.jsp"><img alt=thalassemia src="overload_files/in_thalassemia.gif" border=0></a> </li>
  64.                         <li><a class=rollover id=left_003_002_002 href="http://localhost:7384/sickle_cell_anemia.jsp"><img alt="sickle cell anemia" src="overload_files/in_sickle_cell.gif" border=0></a> </li>
  65.                         <li><a class=rollover id=left_003_002_003 href="http://localhost:7384/myelodysplastic_syndrome.jsp"><img alt="myelodysplastic syndrome" src="overload_files/in_myledysplastic.gif" border=0></a></li>
  66.                     </ul>
  67.                 </li>
  68.             </ul>
  69.         </li>
  70.         </ul>
  71. </body>
  72. </html>


Thanks,
Krishna
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

just change the top "<style>" to <style type="text/css"> ... that's the only thing I can see that isn't quite right looking to me ... but I don't think that's going to cause an error ... what exactly is going wrong?
  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: India

Post 3+ Months Ago

righteous_trespasser wrote:
just change the top "<style>" to <style type="text/css"> ... that's the only thing I can see that isn't quite right looking to me ... but I don't think that's going to cause an error ... what exactly is going wrong?



Hi,

The problem is I am trying to create a css menu which has 3 levels of menu i.e main nav > sub Nav >sub sub Nav.

The navigation system works fine for 1 level, it show the sub nav when hovered on a navigation item, where as if i create an 3rd level navigation item, it is seen along with the 2 sub nav. I want the 3rd level to be seen only when it is called by hover action.

Hope this explains my problem.

Thanks
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Oh okay yes I understand ... maybe this will help ... ?
  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: India

Post 3+ Months Ago

Thanks righteous_trespasser
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

What about a non-javascript IE non-compliant way? :lol:
Code: [ Select ]
.menu ul.li {
display: none;
}

.menu ul.li:hover {
background-color: #cecece;
/* other styles */
}

.menu ul.li li{
display: none;
}

.menu ul.li li:hover {
background-color: #cecece;
/* other styles */
}
  1. .menu ul.li {
  2. display: none;
  3. }
  4. .menu ul.li:hover {
  5. background-color: #cecece;
  6. /* other styles */
  7. }
  8. .menu ul.li li{
  9. display: none;
  10. }
  11. .menu ul.li li:hover {
  12. background-color: #cecece;
  13. /* other styles */
  14. }

And so on and on... doesn't work for IE though... stupid IE
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

wouldn't the following work in IE too ... ?
Code: [ Select ]
.menu ul.li {
display: none;
}
.menu ul.li:hover {
display:block;
background-color: #cecece;
/* other styles */
}
.menu ul.li li{
display: none;
}
.menu ul.li li:hover {
display:block;
background-color: #cecece;
/* other styles */
}
  1. .menu ul.li {
  2. display: none;
  3. }
  4. .menu ul.li:hover {
  5. display:block;
  6. background-color: #cecece;
  7. /* other styles */
  8. }
  9. .menu ul.li li{
  10. display: none;
  11. }
  12. .menu ul.li li:hover {
  13. display:block;
  14. background-color: #cecece;
  15. /* other styles */
  16. }
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

lol maybe... I'm learning and if it does than it would :)
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

I just did a similar thing yesterday, but the added advantage of beign able to expand lists - see an example here. It works up to 4 levels, and the css page is well labeled.

Full information here.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Alex, that looks sweet ... thanks for the link ...

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: Skrillz1 and 30 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.