Hello hello, Im new to this and Im still trying to customize my navbar. I have the dropdown navbar and I have successfully done a "Galleries" Link. I have Categories and sub categories under "Galleries". Now here is my problem. Im trying to add another category and subcategory and Im having trouble doing it. I followed the code to the T and I have not been able to get it right. Can someone help me and let me know what Im doing wrong. If you take a look at it, Im trying to create "Landscapes" Category with a subcategory of "Okinawa Japan" and under that would be the actual folders to my pics ... but I can't get it there. I did it last night with the "People" category and "models, family, candids" subcategories ... but have failed to do the next one. Thank you in advance.

-Rey

http://www.reyof-lightphotography.smugmug.com

Originally Posted by noiya99 Hello hello, Im new to this and Im still trying to customize my navbar. I have the dropdown navbar and I have successfully done a "Galleries" Link. I have Categories and sub categories under "Galleries". Now here is my problem. Im trying to add another category and subcategory and Im having trouble doing it. I followed the code to the T and I have not been able to get it right. Can someone help me and let me know what Im doing wrong. If you take a look at it, Im trying to create "Landscapes" Category with a subcategory of "Okinawa Japan" and under that would be the actual folders to my pics ... but I can't get it there. I did it last night with the "People" category and "models, family, candids" subcategories ... but have failed to do the next one. Thank you in advance. -Rey http://www.reyof-lightphotography.smugmug.com

You had a few errors in your nav html, try this.

<!-- CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div align="center">

<div class="menu">

<ul>

<!-- First Main Menu Item -->

<li><a class="drop" href="http://www.reyof-lightphotography.smugmug.com" title="Rey Of Light Studios">Home
    <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
          <li><a href="mailto:reyclaudianoah@yahoo.com" title="Leave Rey Email">Email Us</a></li>
       </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="http://www.reyof-lightphotography.smugmug.com/galleries" title="Galleries">Galleries
    <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
       <li><a href="http://www.NEED%20URL%20HERE%20REY.com/gallery/1284588" title="My Portfolio">Portfolio</a></li>
       <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/Sports" title="Sports Category">Sports»
           <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
           <ul>
               <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/Sports/318263" title="Basketball">Basketball »
                   <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->   
                   <ul>
                      <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735282#145226024">Mavs</a></li>
                   </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
               </li>            
           </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>

       <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/People" title="People Category">People»
           <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
           <ul>
              <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/People/318267" title="Models">Models »
                  <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> 
                  <ul>
                     <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2820063#150810883">Claudia</a></li>
                     <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2799773#149429912">Charline</a></li>
                  </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li> 
          </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>

       <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/People/318271" title="Family">Family »
           <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> 
           <ul>
              <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2720320#144280983">Curtis Family BW</a></li>
              <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2719905#144277714">Curtis Family</a></li>
              <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/People/318274" title="Candids">Candids</a></li>
              <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735841#145275237">Okinawa Folk</a></li>
           </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>

       <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/Landscapes" title="Landscapes Category">Landscapes»
           <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
           <ul>
              <li><a href="http://reyof-lightphotography.smugmug.com/Landscapes/318272" title="Okinawa Japan">Okinawa Japan</a></li>
           </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>

       <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735762#145265185">Scenery</a></li>
       <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735345#147963561">Flowers</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/gallery/1598265" title="Extra! Extra!">News</a></li>

<!-- Next Main Menu Item -->

<li><a href="http://www.smugmug.com/gallery/2819196" title="Please sign our guestbook!">Guestbook</a></li>

<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/gallery/1575917" title="About the photographer">The Photographer</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</div>
</div>
<!-- End Navbar Code -->

Allen ... thank you for you help ... it worked good ... only thing is this ...

I want it to go this way:

Galleries

Port >>
Sports >>
People >>
Family >>
Landscapes >> Okinawa Japan
________________Scenery
________________Flowers

(sorry, had to use underscores, wouldn't let me leave spaces, I hope you understand what Im saying here)

But Im getting this:

Galleries

Port >>
Sports >>
People >>
Family >>
Landscapes >> Okinawa Japan
Scenery
Flowers


Again, thank you for your help in advance

-Rey

http://www.reyof-lightphotography.smugmug.com

Originally Posted by noiya99 Allen ... thank you for you help ... it worked good ... only thing is this ... I want it to go this way: Galleries Port >> Sports >> People >> Family >> Landscapes >> Okinawa Japan ________________Scenery ________________Flowers (sorry, had to use underscores, wouldn't let me leave spaces, I hope you understand what Im saying here) But Im getting this: Galleries Port >> Sports >> People >> Family >> Landscapes >> Okinawa Japan Scenery Flowers Again, thank you for your help in advance -Rey http://www.reyof-lightphotography.smugmug.com

Change this section.

       <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/Landscapes" title="Landscapes Category">Landscapes»
           <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
           <ul>
              <li><a href="http://reyof-lightphotography.smugmug.com/Landscapes/318272" title="Okinawa Japan">Okinawa Japan</a></li>
              <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735762#145265185">Scenery</a></li>
              <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735345#147963561">Flowers</a></li>
           </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/gallery/1598265" title="Extra! Extra!">News</a></li>

Allen, thank you so much ... it was driving me nuts ... I got a lot to learn with these codes. Glad there are people like you helping out. Thank you again.


[quote=Allen]Change this section.

Hey Allen, I just realized something on my page .... I was trying to created a subcategory to my "Landscapes" category called Okinawa Japan. And under that subcategory would be the galleries. But it turned out to have no subcategory. If you take a look at the category "Sports", it has a subcategory called "basketball" and then under that is the gallery "Mavs". That is how I want Landscapes to be.
Category: Landscapes
Sub: Okinawa Japan
Galleries: Scenery, Flowers

Thanks again in advance.

-Rey

Rey Of Light Studios

Originally Posted by noiya99 Allen, thank you so much ... it was driving me nuts ... I got a lot to learn with these codes. Glad there are people like you helping out. Thank you again.

Originally Posted by noiya99 Hey Allen, I just realized something on my page .... I was trying to created a subcategory to my "Landscapes" category called Okinawa Japan. And under that subcategory would be the galleries. But it turned out to have no subcategory. If you take a look at the category "Sports", it has a subcategory called "basketball" and then under that is the gallery "Mavs". That is how I want Landscapes to be. Category: Landscapes Sub: Okinawa Japan Galleries: Scenery, Flowers Thanks again in advance. -Rey Rey Of Light Studios

I think I read what you originally wanted wrong. This should get it that way.

       <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/Landscapes" title="Landscapes Category">Landscapes »
           <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
           <ul>
              <li><a class="drop" href="http://reyof-lightphotography.smugmug.com/Landscapes/318272" title="Okinawa Japan">Okinawa Japan »
                  <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <ul>
                     <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735762#145265185">Scenery</a></li>
                     <li><a href="http://reyof-lightphotography.smugmug.com/gallery/2735345#147963561">Flowers</a></li>
                  </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>
           </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->

Rock on Allen ... thats exactly the way I want it ... now let me tickle your brain a little more ... when I hover my pointer over the navbar, it changes color to a greenish color, then as I keep moving, it changes to a yellowish. I know I have to change the color code somewhere, but I see a lot of codes and don't know which to change. I figured process of elimination would work, but I got fed up with it because everytime I changed it to black or white, it wouldn't change on my website. How do I find out which one to change. All I want is some basic white/black/grey colors. BTW, grey worked out, don't even remember how I got it there. Im trying to get the navbar to stay black w/white text, the categories to be black w/white text as well, the subs to stay grey w/black text and the galleries white w/black text. Can I get some pointers? Sorry, don't mean to bug you about every little thing, Im still learning. I appreciate your time and effort.

-Rey

Rey Of Light Studios

[quote=Allen]I think I read what you originally wanted wrong. This should get it that way.

[

Originally Posted by noiya99 Rock on Allen ... thats exactly the way I want it ... now let me tickle your brain a little more ... when I hover my pointer over the navbar, it changes color to a greenish color, then as I keep moving, it changes to a yellowish. I know I have to change the color code somewhere, but I see a lot of codes and don't know which to change. I figured process of elimination would work, but I got fed up with it because everytime I changed it to black or white, it wouldn't change on my website. How do I find out which one to change. All I want is some basic white/black/grey colors. BTW, grey worked out, don't even remember how I got it there. Im trying to get the navbar to stay black w/white text, the categories to be black w/white text as well, the subs to stay grey w/black text and the galleries white w/black text. Can I get some pointers? Sorry, don't mean to bug you about every little thing, Im still learning. I appreciate your time and effort. -Rey Rey Of Light Studios

I've been seeing the colors and also the drop box widths and wondering if
you'd ask for help there too.
Trying to understand. A little test, fill in the blanks.

example
Main buttons
non-hover... white text black background
hover ......... gray text black background

Main buttons
non-hover... _____ text _____ background
hover ........ _____ text _____ background

drops
non-hover... _____ text _____ background
hover ........ _____ text _____ background

flyouts
non-hover... _____ text _____ background
hover ........ _____ text _____ background

Hope I get 100 ...

Originally Posted by Allen I've been seeing the colors and also the drop box widths and wondering if you'd ask for help there too. Trying to understand. A little test, fill in the blanks. example Main buttons non-hover... white text black background hover ......... gray text black background Main buttons non-hover... white text black background hover ........ white text black background drops non-hover... black text grey background hover ........ black text grey background flyouts non-hover... black text white background hover ........ black text white background As you can tell, I don't care too much about the hover color ... Im not going to be that picky. Thanks again ...

Originally Posted by noiya99 Hope I get 100 ...

I slammed a different version of the nav code and got all the colors set, I think.
Oops just noticed the reverse colors for the drops. Will get that next if this isn't ok.

At least you'll find comments on almost every line as to what it does.

Always save your CSS in a text file before making any changes for backup.
Also your header, js and footer code.

Replace the whole nav CSS with this, too hard to point out all the changes.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

            /* Common Styling */
.menu {
      position: relative;
      display: block;
      z-index: 99;
      padding: 10px 0px 15px 0px; /* spacing around menu - top right bottom left */
      height: 20px;   /* menu container (div .menu) */
      width: 716px;   /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
      margin: 0 auto;
}

.menu ul {
      padding: 10px 0px 10px 0px;  /* this effects menu centering if too big */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}

.menu ul li {
      float:left;    /* WARNING: float right reverses menu */
      position:relative;
}

.menu ul li a, 
.menu ul li a:visited {
      display: block;
      font-size: 11px;        /* main buttons */
      color: white;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: 125px;           /* main box width */
      height: 20px;           /* main box height */
      border: 1px solid  white;  
      border-width: 1px 1px 0px 0px;
      background: #000;    /* main button color */
      padding: 5px;
      line-height: 20px;      /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
      width: 125px; w\idth: 125px;      /* IE main button */
}

.menu ul li ul {
      display: none;}

       /* +++++++++++++++++++++++++++ */
       /* Specific to Non-IE browsers */
       /* +++++++++++++++++++++++++++ */

.menu ul li:hover a { 
      color: #ccc;       /* main when hover DD */
      background: black;  /* main when hover DD */
}

.menu ul li:hover ul {
      display: block;
      position: absolute;
      top: 4px;            /* FF DD up down */
      margin-top: 17px;     /* FF main mouse active vertical */
      left: 0px;            /* FF DD right left */
      width: 125px;         /* unknown */
}

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

.menu ul li:hover ul li a {
      display: block;
      background: black;  /* DD FO non-hover */
      color: white;           /* DD FO non-hover */
      height: auto;
      line-height: 20px;      /* DD FO box height */
      padding: 0px 0px;
      width: 135px;           /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
      background: black;     /* DD FO hover */
      color: #ccc;      /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
      display: block;
      position: absolute;
      left: 136px;           /* FF FO right left  */
      top: -27px;            /* FF FO up down  */
      width: 125px;          /* FF FO box width */
}

      /* +++++++++++++++++++++++++++ */
      /*   Specific to IE browsers   */
      /* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
   /* text-decoration: none;  */  /* might be needed */
      color: #ccc;               /* main hover */
      background: black;        /* main hover */
}

.menu ul li a:hover ul {
      display: block;
      position: absolute;
      top: 2px;                /* DD container up down */
      background: none;        /* gets rid of DD container */
      margin-top: 7px;         /* DD container up down */
      left: 0px;               /* DD right left */
}

.menu ul li a:hover ul li a {
      display: block;
      background: black;        /* IE DD color non-hover */
      color: white;               /* IE DD color non-hover */
      height: auto;
      line-height: 20px;        /* IE DD FO box height */
      padding: 0px; 
      width: 125px;             /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
      height: 0;
      width: 0;
}

.menu ul li a:hover ul li a:hover {
      background: black;                  /* DD FO hover */
      color: #ccc;                   /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
         display: block;
         position: absolute;  
         top: -22px;                    /*   FO up down    */
         color: white;                /*   unknown       */
         left: 187px;                   /*   FO right left */
} 

          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
         width: 125px; 
         w\idth: 125px;
}

    /* another hack for IE5.5 */

* html .menu ul ul {
         top: 30px;
         t\op: 31px;       /* IE gap between main bar and the dropdown items */
}

          /* style the table so that it takes no part in 
             the layout - required for IE to work */
.menu table {
         position:absolute;
         top:auto 0; left:0;
}

      /* yet another hack for IE5.5 */

* html .menu ul ul a {
         width: 125px;             /* unknown */
         w\idth: 125px;             /* DD FF width */
}

         /*END EXTRA ADDS FOR IE*/

          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
.menu ul a:hover ul,  /* IE */
.menu ul:hover ul {   /* FF */
         visibility:visible; 
}

          /* keep the 3rd level hidden when you 
             hover on 1st level list OR link */
.menu ul a:hover ul ul,  /* IE */
.menu ul:hover ul ul {   /* FF */
         visibility:hidden;
}

          /* keep the 4th level hidden when you 
             hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul,  /* IE */
.menu ul li:hover ul li:hover ul ul {     /* FF */
         visibility:hidden;
}

         /* make the 3rd level visible when you hover 
            over 2nd level list OR link */
.menu ul a:hover ul a:hover ul,   /* IE */
.menu ul:hover ul:hover ul {      /* FF */
         visibility:visible;
}

         /* make the 4th level visible when you 
           hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul,   /* IE */
.menu ul li:hover ul li:hover ul li:hover ul {        /* FF */
         visibility:visible;
}

 /* ==== END NAVBAR  CODE ==== */ 

[FONT=Verdana][FONT=Courier New]Key: Do not add to CSS
---------------------------------------
Abreviations: |  DD = Dropdown
 used above   |  FO = Flyout
 in comments  |  IE = Internet Explorer
              |  FF = Firefox[/FONT][/FONT]

GOt it ... all the text seems to be white with the background black ... and I think I like it that way. Thanks ...

Do me a favor ... go to my navbar, and you will see category Sports, subcat Basketball. Click on basketball and see where that takes you. Is there a way to disable that subcat. Same thing with Landscapes.

Originally Posted by Allen I slammed a different version of the nav code and got all the colors set, I think. Oops just noticed the reverse colors for the drops. Will get that next if this isn't ok. At least you'll find comments on almost every line as to what it does. Always save your CSS in a text file before making any changes for backup. Also your header, js and footer code. Replace the whole nav CSS with this, too hard to point out all the changes. [FONT=Verdana][FONT=Courier New]Key: Do not add to CSS --------------------------------------- Abreviations: | DD = Dropdown used above | FO = Flyout in comments | IE = Internet Explorer | FF = Firefox[/FONT][/FONT] [/code]

Originally Posted by noiya99 GOt it ... all the text seems to be white with the background black ... and I think I like it that way. Thanks ... Do me a favor ... go to my navbar, and you will see category Sports, subcat Basketball. Click on basketball and see where that takes you. Is there a way to disable that subcat. Same thing with Landscapes.

Change the link to

href="#"

When clicked it won't take you anywhere. If blank would take you
to the home page.

And remove the text from the post in here from your CSS just above the nav code.

Ok, Im all set ... I won't bug you anymore ... thank you so much for your help, it truly is appreciated.

-Rey

Rey Of Light Studios

Originally Posted by Allen Change the link to href="#" When clicked it won't take you anywhere. If blank would take you to the home page. And remove the text from the post in here from your CSS just above the nav code.