Pure CSS Vertical Cross browser menu w/Fixed Position

[Ronnie]

All my hair is gone...I am looking for a CSS vertical menu, with sub-menus that will work in IE and FF, with a position:fixed; option (or a hack for IE). Does anyone know of such an animal? Thanks.

[BLiZZaRD]

Like in the other post about menus...

http://www.cssplay.co.uk/menus/

Tons of great ones there, all working in all browsers.. lots of vertical ones too

[Ronnie]

Thanks...Stu has a great site and some of the menus will do what I need, but, I can't find one thats fixed, with sub menus for FF and IE.

[boogyman]

until IE6 becomes obsolete you will not be able to find a pure CSS dropdown menu, because browsers previous to IE7 do not support the pseudo selector :hover there is a javascript hack (scroll down to Making It Work) to get around that, however but thatp poses the problem of IE6 and javascript being disabled.

it wouldnt be so hard to create one yourself

<ul id="nav">
     <li><a href="www.mydomain.com">Home</a></li>
     <li><a href="/category1">Link 1</a>
          <ul id="drop1">
               <li><a href="/category1/linkA">Drop A</a></li>
               <li><a href="/category1/linkB">Drop B</a></li>
               <li><a href="/category1/linkC">Drop C</a></li>
               <li><a href="/category1/linkD">Drop D</a></li>
         </ul>
     </li>
     <li><a href="/category2">Link 2</a>
          <ul id="drop2">
               <li><a href="/category2/linkA">Drop A</a></li>
               <li><a href="/category2/linkB">Drop B</a></li>
               <li><a href="/category2/linkC">Drop C</a></li>
               <li><a href="/category2/linkD">Drop D</a></li>
         </ul>
     </li>
     <li><a href="/category3">Link 3</a>
          <ul id="drop3">
               <li><a href="/category3/linkA">Drop A</a></li>
               <li><a href="/category3/linkB">Drop B</a></li>
               <li><a href="/category3/linkC">Drop C</a></li>
               <li><a href="/category3/linkD">Drop D</a></li>
         </ul>
     </li>
</ul>

<style type="text/css">
body {
     background-color: #fff;
     color: #000; 
}
ul li {   /* removes bullets from the lists and defaults display to block */
     display: block;
     list-style:none;
}
ul#nav li ul {display:none}
ul#nav li:hover ul {display:block;}  /* Note this will not work in IE6 or previous */

ul#drop1 {
     position: fixed;
     top: 50px;
     left: 50px;
}
ul#drop2 {
     position: fixed;
     top: 100px;
     left: 50px;
}
ul#drop3 {
     position: fixed;
     top: 150px;
     left: 50px;
}
</style>

// EDIT

one other thing, it might be beneficial to use z-index: n; to make sure that the menus are on the top layer


also in the spirit of reducing bandwidth you could also do this for the dropdowns

ul#nav li ul {
     position:fixed;
     left: 50px;
}
ul#drop1 {top:50px;}
ul#drop2 {top:100px;}
ul#drop3 {top:150px;}

since all menus have the shared properties/values respectively. it will also help with maintanence as you would only need to update 1 line instead of alot more if you choose to expand the menu

[Ronnie]

Thanks...Let me try working on the Javascript. I did try the code and could not get it to be fixed. Thanks again Ronnie...