css horizontal dropdown menu help please

  • eventbyclaire
  • Born
  • Born
  • eventbyclaire
  • Posts: 2

Post 3+ Months Ago

I've been struggling with this for a little while now. I have created a horizontal drop down menu with a rollover effect. It works just fine in firefox but i can't get it to work in IE. I can only access the first option in the submenu. does anyone know of a solution to this?

please find code below:
Code: [ Select ]
html

<ul id="navlist">
                <li id="active"><a href="index.html" id="current">home</a></li>
                <li><a href="pages/projects.html">projects</a>
                    <ul id="subnavlist">
                    <li><a href="pages/projects/residential.html">residential</a></li>
                    <li><a href="pages/projects/commercial.html">commercial</a></li>
                    <li><a href="pages/projects/interiors.html">interiors</a></li>
                    <li><a href="pages/projects/clubs.html">clubs</a></li>
                
                    </ul>
                </li>
                
                <li><a href="pages/people.html">people</a></li>
                <li><a href="pages/montages.html">montages</a></li>
                <li><a href="pages/contact.html">contact</a></li>
            </ul>
  1. html
  2. <ul id="navlist">
  3.                 <li id="active"><a href="index.html" id="current">home</a></li>
  4.                 <li><a href="pages/projects.html">projects</a>
  5.                     <ul id="subnavlist">
  6.                     <li><a href="pages/projects/residential.html">residential</a></li>
  7.                     <li><a href="pages/projects/commercial.html">commercial</a></li>
  8.                     <li><a href="pages/projects/interiors.html">interiors</a></li>
  9.                     <li><a href="pages/projects/clubs.html">clubs</a></li>
  10.                 
  11.                     </ul>
  12.                 </li>
  13.                 
  14.                 <li><a href="pages/people.html">people</a></li>
  15.                 <li><a href="pages/montages.html">montages</a></li>
  16.                 <li><a href="pages/contact.html">contact</a></li>
  17.             </ul>
css
Code: [ Select ]
#navlist, #navlist ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#navlist a {
    display: block;
    width: 120px;
}

#navlist li {
    float: left;
    width: 120px;
}
#navlist ul li
{
    position: relative;
}
#navlist li ul {
    position: absolute;
    width: 120px;
    left: -999em;
}

#navlist li:hover ul {
    left: auto;
}
#navlist li:hover ul, #navlist li.sfhover ul {
    left: auto;
}

/* add */

#menubar
{
height: 4.7em;
}
#navlist
{
    position: relative;
    width: 100%;
    height: 1.5em;
    margin: 0;
    white-space: nowrap;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6;
    padding-left: 0;

}

#navlist ul li
{
    position: relative;
}
#navlist li ul
{
    position: absolute;
    display:none
}

#navlist li:hover ul, #navlist li.over ul {
display: block;
}

#navlist li
{
    float: left;
    list-style-type: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
}

#navlist li a
{
position: relative;
width: 6em;
display: block;
margin: 0;
color: #808080;
font-size: 12px;
text-align: left;
text-decoration: none;
}

#navlist li a:hover
{
color: #000000;
}

#navlist li#active a
{
    color: #808080;
    font-size: 12px;
}

#navlist li#active a:hover { color: #000000; }

#navlist ul#subnavlist
{
    position: absolute;
    height: 20px;
    width: 600px;
    padding-top: 5px;
    }
  1. #navlist, #navlist ul {
  2.     padding: 0;
  3.     margin: 0;
  4.     list-style: none;
  5. }
  6. #navlist a {
  7.     display: block;
  8.     width: 120px;
  9. }
  10. #navlist li {
  11.     float: left;
  12.     width: 120px;
  13. }
  14. #navlist ul li
  15. {
  16.     position: relative;
  17. }
  18. #navlist li ul {
  19.     position: absolute;
  20.     width: 120px;
  21.     left: -999em;
  22. }
  23. #navlist li:hover ul {
  24.     left: auto;
  25. }
  26. #navlist li:hover ul, #navlist li.sfhover ul {
  27.     left: auto;
  28. }
  29. /* add */
  30. #menubar
  31. {
  32. height: 4.7em;
  33. }
  34. #navlist
  35. {
  36.     position: relative;
  37.     width: 100%;
  38.     height: 1.5em;
  39.     margin: 0;
  40.     white-space: nowrap;
  41.     border-bottom-width: 1px;
  42.     border-bottom-style: solid;
  43.     border-bottom-color: #333333;
  44.     padding-top: 0;
  45.     padding-right: 0;
  46.     padding-bottom: 6;
  47.     padding-left: 0;
  48. }
  49. #navlist ul li
  50. {
  51.     position: relative;
  52. }
  53. #navlist li ul
  54. {
  55.     position: absolute;
  56.     display:none
  57. }
  58. #navlist li:hover ul, #navlist li.over ul {
  59. display: block;
  60. }
  61. #navlist li
  62. {
  63.     float: left;
  64.     list-style-type: none;
  65.     margin-top: 0;
  66.     margin-right: 0;
  67.     margin-bottom: 0;
  68.     margin-left: 0px;
  69. }
  70. #navlist li a
  71. {
  72. position: relative;
  73. width: 6em;
  74. display: block;
  75. margin: 0;
  76. color: #808080;
  77. font-size: 12px;
  78. text-align: left;
  79. text-decoration: none;
  80. }
  81. #navlist li a:hover
  82. {
  83. color: #000000;
  84. }
  85. #navlist li#active a
  86. {
  87.     color: #808080;
  88.     font-size: 12px;
  89. }
  90. #navlist li#active a:hover { color: #000000; }
  91. #navlist ul#subnavlist
  92. {
  93.     position: absolute;
  94.     height: 20px;
  95.     width: 600px;
  96.     padding-top: 5px;
  97.     }
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Rika
  • Newbie
  • Newbie
  • Rika
  • Posts: 14
  • Loc: Singapore

Post 3+ Months Ago

I dont have a solution to this. but maybe u can try purecssmenu DOT com, generate one that is the same as yours and maybe u will be able to get yours working
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

what version of IE are you using? IE6 doesn't recognize :hover on any thing other than an anchor tag. you'll have to use javascript instead
  • carmen007
  • Newbie
  • Newbie
  • carmen007
  • Posts: 7

Post 3+ Months Ago

Use java script/css and a little bit googling :)
  • eventbyclaire
  • Born
  • Born
  • eventbyclaire
  • Posts: 2

Post 3+ Months Ago

Thanks,

i did end up using javascript.
  • carmen007
  • Newbie
  • Newbie
  • carmen007
  • Posts: 7

Post 3+ Months Ago

Great :)
  • bilhasry4you
  • Novice
  • Novice
  • bilhasry4you
  • Posts: 33

Post 3+ Months Ago

nice one, can share here the right code?

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 26 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.