#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17

    Dropdown Menu Second Level Sub-Menu


    I'm using the suggestions of those on here and using the
    http://www.dynamicsitesolutions.com/.../#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..???
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Add a sub-list to one of the sub-lists.

    You'll need to adjust the CSS too.

    Your description is a little vague.

    Maybe these demos would help:
    http://www.positioniseverything.net/css-flyout.html
    http://www.positioniseverything.net/css-dropdowns.html
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    well it's the adjusting of the css that I'm having trouble with. I'm not sure where to do it..... this is what I have as of right now...
    Code:
    <style type="text/css">
    body {
      text-align: center;
    }
    
    ul.exampleMenu,
    ul.exampleMenu li {
      text-align: left;
      height: 36px;
    }
    ul.exampleMenu li ul li {
      width: 118px;
      height: auto;
    }
    ul.exampleMenu,
    ul.exampleMenu li,
    ul.exampleMenu li ul,
    ul.exampleMenu li ul li {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    #exampleCont,#exampleCont2 { /* Safari and Netscape 7.0 were having problems 
      with position:relative on #example */
      margin: 20px auto;  
      width: 200px;
      height: auto;
      position: relative;
      z-index: 500;
    }
    #exampleCont2 {
      z-index: 550;
    }
    ul.exampleMenu {
      width: 200px;
      min-height: 36px;
      height: auto;
    }
    /* \*/
    * html ul.exampleMenu {
      height: 36px;
    }
    ul#example li {
      top: 0;
      width: 200px;
      position: absolute;
      z-index: 500;
      }
    ul#example li ul li {  position: static;  width: 118px;}
    ul#example li.link1 {  left: 0;}
    ul#example li.link2 {  left: 0;}
    ul#example li.link3 {  left: 0;}
    ul#example2 li {  float:left;  width: 200px;  height: auto;
      position: relative;  overflow: visible;}
    div.parent { position: relative; }
    ul#example2 li ul li {  float:none;  display:block;  width: 118px;  position: static;}
    ul.exampleMenu li a {  text-align: center;  float: left;   width: 200px;  line-height: 36px;  height: 36px;  text-indent: -5000px;  text-decoration: none;  background-position: 0 0;}
    
    ul.exampleMenu li {
      background-position: 0 -36px;
    }
    
    ul.exampleMenu li a:hover,
    ul.exampleMenu li:hover a,
    ul.exampleMenu li.sfhover a {
      background: transparent none;
    }
    
    li.link1,li.link1 a {
      background-image: url(menu0.jpg);
    }
    li.link2,li.link2 a {
      background-image: url(menu1.jpg);
    }
    li.link3,li.link3 a {
      background-image: url(menu2.jpg);
    }
    ul.exampleMenu li ul li,ul.exampleMenu li ul li a {
      background-image: none;
    }
    ul#example li ul {
      position: absolute;
      display: none;
      width: 118px;
      top: 36px;
      left: 0;
      color: #000;
      background-color: #aeb;
      border: 1px solid #07d;
      overflow: visible;
      height: auto;
    }
    ul#example li:hover ul,
    ul#example li.sfhover ul {
      display: block;
    }
    div.dropdown {
      position: absolute;
      top: 0px;
      left: 170px;
      width: 178px;
      display: none;
      font-family: verdana;
      font-size: 11px;
    }
    ul#example2 li div.dropdown ul {
      width: 118px;
      color: #000;
      background-color: #4F6B7D;
      border: 1px solid #07d;
      overflow: visible;
      height: auto;
      margin: 0 30px 30px;
    }
    ul#example2 li div.dropdown ul li {
      position: relative;
    } 
    ul#example2 li:hover div.dropdown,
    ul#example2 li.sfhover div.dropdown {
      display:block;
    }
    ul#example>li>ul>li:last-child:after,
    ul#example2>li>div.dropdown>ul>li:last-child:after {
      content: ".";
      display: block;
      clear: both;
      height: 2px;
      visibility: hidden;
    }
    ul#example>li>ul>li:last-child:after:lang(en),
    ul#example2>li>div.dropdown>ul>li:last-child:after:lang(en) {
      height: 0;
    }
    
    
    /* IE/Win bug fix \*/
    * html div.parent,* html div.dropdown,
    * html ul.exampleMenu li ul,* html ul.exampleMenu li ul li a {
      height: 1px;
    }
    * html ul.exampleMenu li ul li {
      margin-left: -16px;
      mar\gin-left: 0;
      height: 1%;
    }
    * html ul.exampleMenu li ul li a {
      width: 100%; /* IE 5.0/win bug fix \*/
    }
    /* end bug fix */
    
    ul.exampleMenu li ul li a {
      text-align: left;
      display:block;
      width: 118px;
      line-height: 1.5em;
      height: auto;
      text-indent: 1em;
      text-decoration: none;
      padding: 0;
      margin: 0;
      background-color: #aeb;
      float: none;
    }
    ul.exampleMenu li ul li a:hover,
    ul.exampleMenu li ul li:hover a,
    ul.exampleMenu li ul li.sfhover a {
      background-color: #9FAFB8;
    }
    .one {z-index: 10;}
    .two {z-index: 20;}
    .three {z-index: 30;}
    </style>
    
    <div id="exampleCont2">
      <ul id="example2" class="exampleMenu">
        <li class="link1">
         <div class="parent one"><a href="#">link1</a>
           <div class="dropdown">				<ul>
                   <li><a href="#">Link 1</a></li>
    	  <li><a href="#">Link 2</a></li>
    	</ul>
          </div>
        </div>
       </li>
    
       <li class="link2">
         <div class="parent two"><a href="#">link2</a>
           <div class="dropdown">
                 <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
    	</ul>
          </div>
        </div>
       </li>
    	
       <li class="link3">
         <div class="parent three"><a href="#">link3</a>
           <div class="dropdown">
    	<ul>
                   <li><a href="#">Link 1</a></li>
                   <li><a href="#">Link 2</a></li>
    	</ul>
            </div>
          </div>
       </li>
    	
    </ul>
    </div>
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You didn't add the 2nd level drop down menu.

    Could you be more specific about what part you need help with?

    I suggest you temporarily add contrasting background colors to the various elements, so you can see where they are.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    For instance....Ideally I would want to be able to have submenu's for some of the drop downs.... examples of where I would want them are in BOLD:
    Code:
    <div id="exampleCont2">
      <ul id="example2" class="exampleMenu">
        <li class="link1">
         <div class="parent one"><a href="#">link1</a>
           <div class="dropdown">				<ul>
                   <li><a href="#">Link 1</a>
                           <ul>
    		<li><a href="#">submenu 1</a></li>
                             <li><a href="#">submenu 2</a></li>
    		</ul>
                    </li>
    	  <li><a href="#">Link 2</a></li>
    	</ul>
          </div>
        </div>
       </li>
    
       <li class="link2">
         <div class="parent two"><a href="#">link2</a>
           <div class="dropdown">
                 <ul>
                    <li><a href="#">Link 1</a>
                           <ul>
    		<li><a href="#">submenu 1</a></li>
                             <li><a href="#">submenu 2</a></li>
    		</ul>
                    </li>
    
    
                    <li><a href="#">Link 2</a>
    
                           <ul>
    		<li><a href="#">submenu 1</a></li>
                             <li><a href="#">submenu 2</a></li>
    		</ul>
                    </li>
    
    
    	</ul>
          </div>
        </div>
       </li>
    	
       <li class="link3">
         <div class="parent three"><a href="#">link3</a>
           <div class="dropdown">
    	<ul>
                   <li><a href="#">Link 1</a></li>
                   <li><a href="#">Link 2</a></li>
    	</ul>
            </div>
          </div>
       </li>
    	
    </ul>
    </div>
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Take a look at this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    <style type="text/css">
    body {
      text-align: center;
    }
    
    ul.exampleMenu,
    ul.exampleMenu li {
      text-align: left;
      height: 36px;
    }
    ul.exampleMenu li ul li {
      width: 200px;
      height: auto;
    }
    ul.exampleMenu,
    ul.exampleMenu li,
    ul.exampleMenu li ul,
    ul.exampleMenu li ul li {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    #exampleCont,#exampleCont2 { /* Safari and Netscape 7.0 were having problems 
      with position:relative on #example */
      margin: 20px auto;  
      width: 200px;
      height: auto;
      position: relative;
      z-index: 500;
    }
    #exampleCont2 {
      z-index: 550;
    }
    ul.exampleMenu {
      width: 200px;
      min-height: 36px;
      height: auto;
    }
    /* \*/
    * html ul.exampleMenu {
      height: 36px;
    }
    ul#example li {
      top: 0;
      width: 200px;
      position: absolute;
      z-index: 500;
      }
    ul#example li ul li {  position: static;  width: 200px;}
    ul#example li.link1 {  left: 0;}
    ul#example li.link2 {  left: 0;}
    ul#example li.link3 {  left: 0;}
    ul#example2 li {  float:left;  width: 200px;  height: auto;
      position: relative;  overflow: visible;}
    div.parent { position: relative; }
    ul#example2 li ul li {  float:none;  display:block;  width: 200px;  position: static;}
    ul.exampleMenu li a {  text-align: center;  float: left;   width: 200px;  line-height: 36px;  height: 36px;  text-indent: -5000px;  text-decoration: none;  background-position: 0 0;}
    
    
    ul.exampleMenu li {
      background-position: 0 -36px;
    }
    
    ul.exampleMenu li a:hover,
    ul.exampleMenu li:hover a,
    ul.exampleMenu li.sfhover a {
      background: transparent none;
    }
    
    li.link1,li.link1 a {
      background-image: url(menu0.jpg);
    }
    li.link2,li.link2 a {
      background-image: url(menu1.jpg); 
    }
    li.link3,li.link3 a {
      background-image: url(menu2.jpg);
    }
    ul.exampleMenu li ul li,ul.exampleMenu li ul li a {
      background-image: none;
    }
    
    
    div.dropdown,
    div.dropdown div.dropdown,
    ul#example2 li:hover div.dropdown div.dropdown,
    ul#example2 li.sfhover div.dropdown div.dropdown {
      position: absolute;
      top: 0px;
      left: 200px;
      width: 178px;
      display: none;
      font-family: verdana;
      font-size: 11px;
      background-color: #f00;
    }
    ul#example2 li div.dropdown ul {
      width: 200px;
      color: #000;
      background-color: #4F6B7D;
      border: 1px solid #07d;
      overflow: visible;
      height: auto;
      margin: 0 30px 30px;
    }
    ul#example2 li div.dropdown ul li {
      position: relative;
    } 
    ul#example2 li:hover div.dropdown,
    ul#example2 li.sfhover div.dropdown,
    ul#example2 div.dropdown li:hover div.dropdown,
    ul#example2 div.dropdown li.sfhover div.dropdown {
      display:block;
    }
    ul#example>li>ul>li:last-child:after,
    ul#example2>li>div.dropdown>ul>li:last-child:after {
      content: ".";
      display: block;
      clear: both;
      height: 2px;
      visibility: hidden;
    }
    ul#example>li>ul>li:last-child:after:lang(en),
    ul#example2>li>div.dropdown>ul>li:last-child:after:lang(en) {
      height: 0;
    }
    
    
    /* IE/Win bug fix \*/
    * html div.parent,* html div.dropdown,
    * html ul.exampleMenu li ul,* html ul.exampleMenu li ul li a {
      height: 1px;
    }
    * html ul.exampleMenu li ul li {
      margin-left: -16px;
      mar\gin-left: 0;
      height: 1%;
    }
    * html ul.exampleMenu li ul li a {
      width: 100%; /* IE 5.0/win bug fix \*/
    }
    /* end bug fix */
    
    ul.exampleMenu li ul li a {
      text-align: left;
      display:block;
      width: 200px;
      line-height: 1.5em;
      height: auto;
      text-indent: 1em;
      text-decoration: none;
      padding: 0;
      margin: 0;
      background-color: #aeb;
      float: none;
    }
    ul.exampleMenu li ul li a:hover,
    ul.exampleMenu li ul li:hover a,
    ul.exampleMenu li ul li.sfhover a {
      background-color: #9FAFB8;
    }
    ul.exampleMenu li ul li:hover ul li a,
    ul.exampleMenu li ul li.sfhover ul li a {
      background-color: #4F6B7D;
    }
    ul.exampleMenu li ul li ul li a:hover,
    ul.exampleMenu li ul li ul li:hover a,
    ul.exampleMenu li ul li ul li.sfhover a {
      background-color: #9FAFB8;
    }
    .one {z-index: 10;}
    .two {z-index: 20;}
    .three {z-index: 30;}
    </style>
    <script type="text/javascript"><!--
    // -->
    </script>
    </head>
    <body>
    
    <div id="exampleCont2">
      <ul id="example2" class="exampleMenu">
        <li class="link1">
         <div class="parent one"><a href="#">link1</a>
           <div class="dropdown">				<ul>
                   <li><a href="#">Link 1</a></li>
    	  <li><a href="#">Link 2</a>
          
             <div class="dropdown"><ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
    	       </ul>
        </div></li>
    	</ul>
          </div>
        </div>
       </li>
    
       <li class="link2">
         <div class="parent two"><a href="#">link2</a>
           <div class="dropdown">
                 <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
    	</ul>
          </div>
        </div>
       </li>
    	
       <li class="link3">
         <div class="parent three"><a href="#">link3</a>
           <div class="dropdown">
    	<ul>
                   <li><a href="#">Link 1</a></li>
                   <li><a href="#">Link 2</a></li>
    	</ul>
            </div>
          </div>
       </li>
    	
    </ul>
    </div>
    </body>
    </html>
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    Arg....OK....so thank you so much for all your help!..But.... now I have 2 more problems...
    1) I don't want the drop downs to be so wide, so I changed the width, now the problem is that the second level drop down menu is too far to the right of and not right next to the first level drop down like it should be, so....I changed it so that the 1st & 2nd level dropdowns overlapped the menu images, which works fine, until I have more than 2 things in any submenu because it gets hidden by the menu graphic item just below it
    Code:
    <style type="text/css">
    
    ul.exampleMenu,
    ul.exampleMenu li {
      text-align: left;
      height: 36px;
    }
    ul.exampleMenu li ul li {
      width: 200px;
      height: auto;
    }
    ul.exampleMenu,
    ul.exampleMenu li,
    ul.exampleMenu li ul,
    ul.exampleMenu li ul li {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    #exampleCont,#exampleCont2 { 
      margin: 0px auto;  
      width: 200px;
      height: auto;
      position: relative;
      z-index: 500;
    }
    #exampleCont2 {
      z-index: 550;
    }
    ul.exampleMenu {
      width: 200px;
      min-height: 36px;
      height: auto;
    }
    /* \*/
    * html ul.exampleMenu {
      height: 36px;
    }
    ul#example li {
      top: 0;
      width: 200px;
      position: absolute;
      z-index: 500;
      }
    ul#example li ul li {  position: static;  width: 200px;}
    ul#example li.link1 {  left: 0;}
    ul#example li.link2 {  left: 0;}
    ul#example li.link3 {  left: 0;}
    ul#example li.link4 {  left: 0;}
    ul#example li.link5 {  left: 0;}
    ul#example li.link6 {  left: 0;}
    ul#example2 li {  float:left;  width: 120px;  height: auto;
      position: relative;  overflow: visible;}
    div.parent { position: relative; }
    ul#example2 li ul li {  float:none;  display:block;  width: 120px;  position: static;}
    ul.exampleMenu li a {  text-align: center;  float: left;   width: 200px;  line-height: 36px;  height: 36px;  text-indent: -5000px;  text-decoration: none;  background-position: 0 0;}
    
    
    ul.exampleMenu li {
      background-position: 0 -36px;
    }
    
    ul.exampleMenu li a:hover,
    ul.exampleMenu li:hover a,
    ul.exampleMenu li.sfhover a {
      background: transparent none;
      color: #FFFFFF;
    }
    
    li.link1,li.link1 a {
      background-image: url(menu0.jpg);
    }
    li.link2,li.link2 a {
      background-image: url(menu1.jpg); 
    }
    li.link3,li.link3 a {
      background-image: url(menu2.jpg);
    }
    li.link4,li.link4 a {
      background-image: url(menu3.jpg);
    }
    li.link5,li.link5 a {
      background-image: url(menu4.jpg);
    }
    li.link6,li.link6 a {
      background-image: url(menu5.jpg);
    }
    ul.exampleMenu li ul li,ul.exampleMenu li ul li a {
      background-image: none;
    }
    
    
    div.dropdown,
    div.dropdown div.dropdown,
    ul#example2 li:hover div.dropdown div.dropdown,
    ul#example2 li.sfhover div.dropdown div.dropdown {
      position: absolute;
      top: 0px;
      left: 120px;
      width: 178px;
      display: none;
      font-family: verdana;
      font-size: 11px;
      font-weight: bold;
      
    }
    ul#example2 li div.dropdown ul {
      width: 100px;
      color: #FFF;
      background-color: #4F6B7D;
      border: 1px solid #07d;
      overflow: visible;
      height: auto;
      margin: 0 1px 1px;
    }
    ul#example2 li div.dropdown ul li {
      position: relative;
    } 
    ul#example2 li:hover div.dropdown,
    ul#example2 li.sfhover div.dropdown,
    ul#example2 div.dropdown li:hover div.dropdown,
    ul#example2 div.dropdown li.sfhover div.dropdown {
      display:block;
    }
    ul#example>li>ul>li:last-child:after,
    ul#example2>li>div.dropdown>ul>li:last-child:after {
      content: ".";
      display: block;
      clear: both;
      height: 2px;
      visibility: hidden;
    }
    ul#example>li>ul>li:last-child:after:lang(en),
    ul#example2>li>div.dropdown>ul>li:last-child:after:lang(en) {
      height: 0;
    }
    
    
    /* IE/Win bug fix \*/
    * html div.parent,* html div.dropdown,
    * html ul.exampleMenu li ul,* html ul.exampleMenu li ul li a {
      height: 1px;
    }
    * html ul.exampleMenu li ul li {
      margin-left: -16px;
      mar\gin-left: 0;
      height: 1%;
    }
    * html ul.exampleMenu li ul li a {
      width: 100%; /* IE 5.0/win bug fix \*/
    }
    /* end bug fix */
    
    ul.exampleMenu li ul li a {
      text-align: left;
      display:block;
      width: 100px;
      line-height: 1.5em;
      height: auto;
      text-indent: 1em;
      text-decoration: none;
      padding: 0;
      margin: 0;
      background-color: #aeb;
      float: none;
    }
    ul.exampleMenu li ul li a:hover,
    ul.exampleMenu li ul li:hover a,
    ul.exampleMenu li ul li.sfhover a {
      background-color: #9FAFB8;
    }
    ul.exampleMenu li ul li:hover ul li a,
    ul.exampleMenu li ul li.sfhover ul li a {
      background-color: #4F6B7D;
    }
    ul.exampleMenu li ul li ul li a:hover,
    ul.exampleMenu li ul li ul li:hover a,
    ul.exampleMenu li ul li ul li.sfhover a {
      background-color: #9FAFB8;
    }
    .one {z-index: 10;}
    .two {z-index: 20;}
    .three {z-index: 30;}
    .four {z-index: 40;}
    .five {z-index: 50;}
    .six {z-index: 60;}
    </style>
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Invert the z-indexes.

    Code:
    .one {z-index: 60;}
    .two {z-index: 50;}
    .three {z-index: 40;}
    .four {z-index: 30;}
    .five {z-index: 20;}
    .six {z-index: 10;}
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    I tried that.....it didn't work
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    K...sorry if this is a double post, but it was still saying the last post was yours (Kravitz) so I got paranoid...

    as for the reversing of the indexes, I tried that.....it didn't work
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Could you put a copy of this online, so I can see exactly what you are seeing?

    Add this.
    Code:
    ul#example2 li:hover div.dropdown div.dropdown {
      left: 100px;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    This one is the problem I was talking about...(on the 'about us' button you should see the problem)
    http://www.thespinzone.com/temp/wip/devshed_krav.html

    In this example, on the first button 'home', when you scroll over Link 2 and get the 2nd submenu, you'll see how far out it is....
    http://www.thespinzone.com/temp/wip/devshed_krav1.html
  24. #13
  25. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It's fine in Firefox, but I do see the problems in IE6. Next time please tell us which browsers the problems show up in.

    You need a doctype.
    http://hsivonen.iki.fi/doctype/
    http://www.alistapart.com/articles/doctype/
    http://www.juicystudio.com/choosing-doctype/
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    Please fix your other HTML errors.

    If you want to know why: Why we won’t help you [dive into mark]
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    OK..I am more confused now than before...admittedly, I am not well versed on the doctype subject...but I did what I 'thought' would fix the problem and it didn't help.

    Furthermore, the page that I had linked to http://www.thespinzone.com/temp/wip/devshed_krav.html was just a dummy page so it's a bit messy in the coding...but regardless...shouldn't the dropdowns still work in IE??

IMN logo majestic logo threadwatch logo seochat tools logo