Originally Posted by Butlerkid Allen, I was scared to death of doing this....but you have been absolutely wonderful to help me get this done! Thank you, thank you, Please take a look and see if you recommend any fine tuning! It gets a little confusing with the fly outs, but I like the "quick access" the drop downs provide to get to the galleries!

Looks good.

I was playing with using one main button named "Countries", not bad but
would add another flyout.

Originally Posted by Butlerkid Allen, I was scared to death of doing this....but you have been absolutely wonderful to help me get this done! Thank you, thank you, Please take a look and see if you recommend any fine tuning! It gets a little confusing with the fly outs, but I like the "quick access" the drop downs provide to get to the galleries!

Originally Posted by Allen Looks good. I was playing with using one main button named "Countries", not bad but would add another flyout.

Countries as a main button, might try it. You can always revert back.

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<li><a href="/" title="">Homepage</a></li>
<li><a class="drop" href="/Underwater" title="">Underwater
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Underwater/PapuaNewGuinea/5304341_FSF2T" title="">Papua New Guinea</a></li>
        <li><a href="/Underwater/Grand-Cayman/16765907_CGfZW4" title="">Grand Cayman</a></li>
        <li><a href="/Underwater/Belize-Southern-California/16766235_JTMdTh" title="">Belize/Southern California</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li><a class="drop" href="#" title="">Countries
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>

<!-- indented section for countries -->

<li><a class="drop" href="/UnitedStates" title="">United States
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a class="drop" href="/UnitedStates/Alaska" title="">Alaska
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/UnitedStates/Alaska/Alaskan-Grizzly-Bears/13585433_SYZZ6">Grizzly Bears</a></li>
                <li><a href="/UnitedStates/Alaska/Alaskan-Landscapes/13819271_KLjPJ">Landscapes</a></li>
                <li><a href="/UnitedStates/Alaska/Alaska-Eagles/13834761_GgxRS">Eagles</a></li>
                <li><a href="/UnitedStates/Alaska/Alaskan-Wildlife/13834981_26mP2">Wildlife</a></li>
                <li><a href="/UnitedStates/Alaska/Alaskas-Birds/14408098_JMeLB">Birds</a></li>
                <li><a href="/UnitedStates/Alaska/Alaskas-Towns/14408185_RnFUH">Towns</a></li>
                <li><a href="/UnitedStates/Alaska/Alaskas-Plants/14407667_8mKbi">Plants</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/UnitedStates/Yellowstone2/Yellowstone/7826801_beELy" title="">Yellowstone</a></li>
        <li><a class="drop" href="/UnitedStates/Tennessee2" title="">Tennessee
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/UnitedStates/Tennessee2/Tennessee/7827599_veDgD">Tennessee</a></li>
                <li><a href="/UnitedStates/Tennessee2/Infra-Red-Tennessee/6212458_3cdEZ" title="">Infra-Red</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/UnitedStates/Utah/Utah/17024144_DSSpxV" title="">Utah</a></li>
        <li><a class="drop" href="/UnitedStates/United-States-Other/Wyoming" title="">Wyoming
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/UnitedStates/United-States-Other/Wyoming/9621459_NidLq">Wyoming</a></li>
                <li><a href="/UnitedStates/United-States-Other/Glacier-National-Park/9631984_WXLap">Glacier National Park</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="/UnitedStates/South-Dakota" title="">South-Dakota
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/UnitedStates/South-Dakota/Mount-Rushmore-South-Dakota/9621259_gNdNT">Mount Rushmore</a></li>
                <li><a href="/UnitedStates/South-Dakota/South-Dakota/9620638_hgWHz">Badlands</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/UnitedStates/Southwest/5062436_meLom" title="">Southwest</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Canada" title="">Canada
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Canada/Canada-Mountains-and-Water/15003381_VfjfM" title="">Mtns &amp; Water</a></li>
        <li><a href="/Canada/Canadas-Black-Bears/15003321_yiHfe">Black Bears</a></li>
        <li><a href="/Canada/Canadas-Hummingbirds/15488861_eKgdy">Hummingbirds</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Asia" title="">Asia
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a class="drop" href="/Asia/India" title="">India
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Asia/India//India-Taj-Mahal/10459591_uqHDK">Taj Mahal/Jaipur</a></li>
                <li><a href="/Asia/India/India-Pushkar-Camel-Fair-1/10459845_BbkrZ">Pushkar</a></li>
                <li><a href="/Asia/India/India-Udaipur-Jaisalmer/10460115_NQHxd">Udaipur/Jaisalmer</a></li>
                <li><a href="/Asia/India/India-Other-1/10460203_pHxzn">Other</a></li>
                <li><a href="/Asia/India/India-Fatehpur-Sikri-Jodhpur/10459268_QZ7ej">Fatehpur Sikri/Jodpur</a></li>
                <li><a href="/Asia/India/India-Chittorgarh-Bikaner/10460079_8fp36">Chittorgarh/Bikaner</a></li>
                <li><a href="/Asia/India/India-Bharatpur-Bird-Park-1/10459532_kjKUb">Bharatpur Bird Park</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="/Asia/Turkey-2002" title="">Turkey
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Asia/Turkey-2002/Istanbul/16532987_ZX3ub">Istanbul</a></li>
                <li><a href="/Asia/Turkey-2002/Cappadocia/16533141_TbsZX">Cappadocia</a></li>
                <li><a href="/Asia/Turkey-2002/Historic-Places-in-Turkey/16533308_CcVdt">Historic Places</a></li>
                <li><a href="/Asia/Turkey-2002/Everyday-Life-in-Turkey/16533422_y2e5r">Everyday Life</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="/Asia/CambodiaandThailand" title="">Cambodia/Thailand
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Asia/CambodiaandThailand/Bangkok/7828019_cX3GN">Bangkok</a></li>
                <li><a href="/Asia/CambodiaandThailand/Cambodia/7827966_PFGg4">Cambodia</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/Asia/Bhutan/5705351_zoFCq#507638934_GgCHy" title="">Bhutan</a></li>
        <li><a href="/Asia/China/7833858_gpnQE#507577437_8iqE9" title="">China</a></li>
     </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Europe/Greece-/7837246_KFxd3" title="">Europe</a></li>
<li><a class="drop" href="/SouthAmerica" title="">South America
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a class="drop" href="/SouthAmerica/Peru/7827086_QaSVA" title="">Peru</a></li>
        <li><a class="drop" href="/SouthAmerica/Galapagos/7828302_oC9Ht" title="">Galapagos</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Africa/Morocco/16289371_CMAQ7" title="">Africa</a></li>

<!-- end indented section for countries -->

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

<li><a class="drop" href="/BirdsandFlowers" title="">Birds/Flowers
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a class="drop" href="/BirdsandFlowers/Hummingbirds2" title="">Hummingbirds
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/BirdsandFlowers/Hummingbirds2/Dazzling-Duos-Hummingbirds/9180197_Lq5c8">Dazzling Duos</a></li>
                <li><a href="/BirdsandFlowers/Hummingbirds2/Hummingbirds/9016460_nuwK2">Hummingbirds</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/BirdsandFlowers/Alaskas-Birds2" title="">Alaskas Birds</a></li>
            <!--[if gte IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/BirdsandFlowers/Alaskas-Birds2/Alaskas-Eagles/16597527_zaf9Q">Alaska Eagles</a></li>
                <li><a href="/BirdsandFlowers/Alaskas-Birds2/Alaskas-Birds/16597627_mwpZE">Alaska Birds</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        <li><a class="drop" href="/BirdsandFlowers/Galapagos" title="">Galapagos/India
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/BirdsandFlowers/Galapagos/Birds-of-the-Galapagos/16597806_wbxfN">Galapagos</a></li>
                <li><a href="/BirdsandFlowers/Galapagos/India/16772298_Qxv6fj">India</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/BirdsandFlowers/Southeasterm-US-Birds/15976931_G4Dxm" title="">Southern U.S.</a></li>
        <li><a href="/BirdsandFlowers/Flowers/5334519_ycfB3" title="">Flowers</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="/InfraRed/Infra-Red/15486726_aDjLX" title="">Infra Red</a></li>

</ul>
</div> <!-- closes menu -->
<div style="clear: both;"></div>
<!-- End Navbar Code -->

CSS

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 20px;  /* top R/L bottom */
   width:500px;          /* Main bar total width, minimize to not wrap to two lines*/
}

      /* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:170px; 
   top:0;
   width:130px;
   height: auto !important;
}

Thanks, Allen.

I truly appreciate your help! I give it a look!

I thought Id finally give the drop down menu a go and I'm getting there, just need a little help please!

I've left the original menu in place and hidden (not logged in) the new one and have a couple of questions

1 - I can't figure out how to move the menu from the centre to sit on the right hand side where the current one does, just above the white line.

2 - I'd like just the text color to change to blue, rather than have the box background (as per the existing menu)

thanks in advance, any help is much appreciated

Allen,

I've implemented your "improved" approach! Thanks! I just changed the title "Countries" to "Travel".

However, now I can't click on the Travel main nav bar item - all the other main nav bar items work. All the other items are at the cat/sub-cat level. (i.e. U.S. is at the cat level - Alaska is at the sub cat.) Is there a way to code all my travel stuff to sort under Travel?

See - you almost got rid of me!

Originally Posted by Butlerkid Allen, I've implemented your "improved" approach! Thanks! I just changed the title "Countries" to "Travel". However, now I can't click on the Travel main nav bar item - all the other main nav bar items work. All the other items are at the cat/sub-cat level. (i.e. U.S. is at the cat level - Alaska is at the sub cat.) Is there a way to code all my travel stuff to sort under Travel? See - you almost got rid of me!

The Travel button link starts with a # which makes not clickable.

If you changed the link to "/Travel" it would go to the Travel category but it
doesn't exist. It looks like all the Travel sub levels start with a category like US.

United States is a category
Alaska is a sub-cat
Birds is a gallery

Originally Posted by psenior1 I thought Id finally give the drop down menu a go and I'm getting there, just need a little help please! I've left the original menu in place and hidden (not logged in) the new one and have a couple of questions 1 - I can't figure out how to move the menu from the centre to sit on the right hand side where the current one does, just above the white line. 2 - I'd like just the text color to change to blue, rather than have the box background (as per the existing menu) thanks in advance, any help is much appreciated

anyone????

Originally Posted by psenior1 anyone????

Will look at colors after this.

Replace your header with this html. Puts thins in correct order.

<div id="my_header">

<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li>
<li><a href="/Recent-Images">client galleries</a></li>
<li><a href="/Sample-Images/Sample-Wedding-Images/9540421_hRvDi">sample images</a></li>
<li><a href="http://www.snrmac.com/Info-and-Prices/Weddings/9539518_ezpzu">prices</a></li>
<li><a href="http://www.snrmac.blogspot.com/">blog</a></li>
<li class="navCurrentPageParent navCurrentPageParentExact"><a class="navCurrentPage navCurrentPageExact" href="/gallery/9876822_PzwZb">about</a></li>
<li><a href="/gallery/7726759_MEvrV">contact us</a></li>
<!--
<li><a href="/" onclick="return false;" class="customContactButton">contact us</a></li>
-->
</ul>
</div>

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<li><a href="/">home</a></li>
<li><a href="/Recent-Images">client galleries</a></li>
<li><a class="drop" href="/Sample-Images/Sample-Wedding-Images/9540421_hRvDi" title="">sample images
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Sample-Images/Sample-Images-2009/7658205_meuGm" title="">sample 1</a></li>
        <li><a href="/Sample-Images/prices-sample-landscape/15847896_hPtP9" title="">sample 2</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Info-and-Prices/Weddings/9539518_ezpzu">prices</a></li>
<li><a href="http://www.snrmac.blogspot.com/">blog</a></li>
<li><a href="/gallery/9876822_PzwZb">about</a></li>
<li><a href="/gallery/7726759_MEvrV">contact us</a></li>
</ul>
</div>  <!-- closes menu -->
<!-- End Navbar Code -->

<div id="my_banner">
<a href="http://www.snrmac.com"><img src="/img/spacer.gif" width="400" border="0" height="70"></a>
</div>

<div style="clear: both;"></div>
</div> <!-- closes my_header -->

CSS changes - hides navcontainer logged in and menu logged out

      /* style the outer div to give it width */
.menu {
   float: right;
   z-index:99;
   margin-top: 45px;
   position:relative;    /* Make the container moveable */
   width:670px;          /* Main bar total width, minimize to center */
}

.notLoggedIn .menu {display: none;} 
.loggedIn #navcontainer {display: none;}

Not sure if this belongs in CSS, I'd remove it.

<link href="/include/css/pureSmugBlack.css" type="text/css" rel="stylesheet" id="pureSmugBlack" />

Originally Posted by psenior1 ... 2 - I'd like just the text color to change to blue, rather than have the box background (as per the existing menu) ...

Here's your whole menu CSS with colors changed and the previous post incorporated.

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

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   float: right;
   z-index:99;
   margin-top: 45px; /* top R/L bottom */
   position:relative;    /* Make the container moveable */
   width:670px;          /* Main bar total width, minimize to center */
}

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

.menu ul ul {
   width:130px; 
}

      /* float the list to make it horizontal and a relative position so that you can control the dropdown 
menu position */
.menu li {
   float:left;
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   font-size:12pt;
   text-decoration:none; 
   color:white;
   background:black;
  border:1px solid black; 
  border-width:1px 1px 1px 1px; 
   font-family: verdana;
   width:auto;            /* Defines the main box dimensions. */
   height:25px;           /*How tall your cells are */
   line-height:25px;      /*Adjust this to vertically center your text in each cell. Should be about the 

same as height. */
   padding: 0 10px;
   min-width: 25px;
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
    {width:130px; w\idth:130px;}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:black;}
.menu ul ul :hover > a.drop {background:black;}

      /* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:black;}  /* not FF */

      /* style the third level hover */
.menu ul ul ul a:hover {background:black;}
.menu ul ul ul :hover > a {background:black;}     /* 3rd (w/o 4th) 4th hover */

      /* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:25px;
   left:0; 
   width:130px;  /* Size of the daughter cells */
}

      /* another hack for IE5.5 */
* html .menu ul ul 
   {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */

      /* position the third level flyout menu */
.menu ul ul ul {
   left:120px; 
   top:0;
   width:160px;
   height:auto;
}

.menu ul ul ul li a {
   color:white;
}

.menu ul ul ul li a:hover {
   color:blue;
}

      /* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:130px; 
   top:0;
   width:130px;
   height: auto !important;
}

     /* 4th level non-hover */
.menu ul ul ul ul li a {
   color:blue;
   width:150px;
}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:black;
   height:25px; 
   line-height:25px; 
   width:100px;
}

.menu ul ul :hover > a.drop  {background:black;}   /* 2nd if 3rd level exists */

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:pink;              /* hover 2nd > 3rd & 4th */
   background:black;        /* hover 3rd > 4th */
   height:25px; 
   line-height:25px; 
   width:110px;
}

      /* yet another hack for IE5.5 */
* html .menu ul ul a 
   {width:120px; w\idth:120px;}

      /* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
   color:blue;
   background:black;
}

      /* main hover */
.menu :hover > a, .menu ul ul :hover > a {
   color:blue;
   background:black;
}

      /* make the 2nd level visible when hover on 1st level list OR link */
.menu ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
      /* keep the 4th level hidden when you hover on 2nd level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
      /* make the 3rd level visible when you hover over 2nd level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* make the 4th level visible when you hover over 3rd level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */



.notLoggedIn .menu {display: none;} 
.loggedIn #navcontainer {display: none;}

Thanks Allen, getting closer!

I put the code in and the new menu displayed fine when logged in, but the old navbar was way off at the top right of the screen when being viewed not logged in.

Thats not a big deal though, I'm happy to just switch over once sorted if its easier rather havigng both menu's in parallel. I did try just removing the old navbar HTML and the new menu looked good, apart from that the white line dissapeared!

Thanks again

Originally Posted by psenior1 Thanks Allen, getting closer! I put the code in and the new menu displayed fine when logged in, but the old navbar was way off at the top right of the screen when being viewed not logged in. Thats not a big deal though, I'm happy to just switch over once sorted if its easier rather havigng both menu's in parallel. I did try just removing the old navbar HTML and the new menu looked good, apart from that the white line dissapeared! Thanks again

Change red

#navcontainer {
float: right;
margin: 15px 0; /* top/bottom right/left */
padding-top: 23px;
padding-right: 10px;
font-family:Arial,Segoe Script,Helvetica;
font-size:17px;
}

Originally Posted by Allen Here's your whole menu CSS with colors changed and the previous post incorporated. /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */ /* http://www.cssplay.co.uk/ */ /* Edited for content, formatting and some elements */ /* Please help support CSSPlay at: */ /* http://www.cssplay.co.uk/support.html */ /* CSS Section */ /* style the outer div to give it width */ .menu { float: right; z-index:99; margin-top: 45px; /* top R/L bottom */ position:relative; /* Make the container moveable */ width:670px; /* Main bar total width, minimize to center */ } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } .menu ul ul { width:130px; } /* float the list to make it horizontal and a relative position so that you can control the dropdown menu position */ .menu li { float:left; text-align:center; width:auto; position:relative; padding: 0; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; font-size:12pt; text-decoration:none; color:white; background:black; border:1px solid black; border-width:1px 1px 1px 1px; font-family: verdana; width:auto; /* Defines the main box dimensions. */ height:25px; /*How tall your cells are */ line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */ padding: 0 10px; min-width: 25px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:130px; w\idth:130px;} /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:black;} .menu ul ul :hover > a.drop {background:black;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:black;} /* not FF */ /* style the third level hover */ .menu ul ul ul a:hover {background:black;} .menu ul ul ul :hover > a {background:black;} /* 3rd (w/o 4th) 4th hover */ /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:25px; left:0; width:130px; /* Size of the daughter cells */ } /* another hack for IE5.5 */ * html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */ /* position the third level flyout menu */ .menu ul ul ul { left:120px; top:0; width:160px; height:auto; } .menu ul ul ul li a { color:white; } .menu ul ul ul li a:hover { color:blue; } /* position the fourth level flyout menu */ .menu ul ul ul ul { left:130px; top:0; width:130px; height: auto !important; } /* 4th level non-hover */ .menu ul ul ul ul li a { color:blue; width:150px; } /* style the table so that it takes no part in the layout */ .menu table {position:absolute; top:0; left:0;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:black; height:25px; line-height:25px; width:100px; } .menu ul ul :hover > a.drop {background:black;} /* 2nd if 3rd level exists */ /* style the third level links */ .menu ul ul ul a, .menu ul ul ul a:visited { color:pink; /* hover 2nd > 3rd & 4th */ background:black; /* hover 3rd > 4th */ height:25px; line-height:25px; width:110px; } /* yet another hack for IE5.5 */ * html .menu ul ul a {width:120px; w\idth:120px;} /* main hover ?IE? */ .menu a:hover, .menu ul ul a:hover { color:blue; background:black; } /* main hover */ .menu :hover > a, .menu ul ul :hover > a { color:blue; background:black; } /* make the 2nd level visible when hover on 1st level list OR link */ .menu ul :hover ul {visibility:visible;} /* keep the 3rd level hidden when you hover on 1st level list OR link */ .menu ul :hover ul ul {visibility:hidden;} /* keep the 4th level hidden when you hover on 2nd level list OR link */ .menu ul :hover ul :hover ul ul {visibility:hidden;} /* make the 3rd level visible when you hover over 2nd level list OR link */ .menu ul :hover ul :hover ul {visibility:visible;} /* make the 4th level visible when you hover over 3rd level list OR link */ .menu ul :hover ul :hover ul :hover ul {visibility:visible;} /* End Navbar Code */ .notLoggedIn .menu {display: none;} .loggedIn #navcontainer {display: none;}

woohooo I think I'm there, you're a star, thank you

Right now I have 8 buttons in my navbar using the easy costumier. I would like to make it just 3 buttons. 1 for home, 1 for galleries, and 1 for contact me. I want the galleries button to drop and display the the gallery names. I would like to keep the font and everything the same and also have it be viewable in the galleries just like it is now.. Is there an easy way to do this???? I'm totally new to this, and I apologize if the answer is already in this thread, I just don't have a lot of time to read everything.
Thanks

Originally Posted by psenior1 woohooo I think I'm there, you're a star, thank you

The text on your pricing page is pretty small and hard to read.

Originally Posted by Allen The text on your pricing page is pretty small and hard to read.

thanks, I'll take alook.

Originally Posted by Allen The text on your pricing page is pretty small and hard to read.

Is there a way to make the description box wider than 800px for an HTLM only page? Making the text bigger will be easier if I've got a bit more space to work with...

thanks

Originally Posted by psenior1 Is there a way to make the description box wider than 800px for an HTLM only page? Making the text bigger will be easier if I've got a bit more space to work with... thanks

Add to CSS replace X's.

.gallery_XXXXXXX #journal,
.gallery_XXXXXXX #albumDescription {
     margin: 0 auto;
     width: XXXpx;
}

Originally Posted by Allen Add to CSS replace X's. .gallery_XXXXXXX #journal, .gallery_XXXXXXX #albumDescription { margin: 0 auto; width: XXXpx; }

thanks again Allen.

One more tweak with the menu - when hovering over the items on the drop down is it possible to have the main item switch back to the original color. For example, I'd like 'Sample Images' to got back to being white when hovering over 'All images' on my site, I've had a play with the colours but cant seen to get it to work....

thanks

Originally Posted by psenior1 thanks again Allen. One more tweak with the menu - when hovering over the items on the drop down is it possible to have the main item switch back to the original color. For example, I'd like 'Sample Images' to got back to being white when hovering over 'All images' on my site, I've had a play with the colours but cant seen to get it to work.... thanks

Never seen this. You'll have to just play with the colors. Might have to a "visited" rule.

I am trying to add the drop down nav to my website (www.bluedaisyart.com)

Two problems I am having:
- Would like Nav bar centered?
- First layer drop downs cut off text in the box

I haven't put in any of my links yet, still just trying to figure this out.

Here is my css:

/* html only page for gallery 16797632 */ 
.notLoggedIn .gallery_16797632 .nophotos { 
display: none; 
}
.gallery_16797632 .pageNav {
display: none;
}
.notLoggedIn .nophotos {
display: none; 
}
.homepage #galleryTitle {
display: none;
}
#categoriesBox .boxTop { 
display: none; 
}

#breadcrumb {visibility: hidden;}
#altViews {visibility: visible;}
.loggedIn #breadcrumb {visibility: visible;}


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

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   z-index:99;
   margin: 0 auto 40px;  /* top R/L bottom */
   position:relative;    /* Make the container moveable */
   width:700px;          /* Main bar total width, minimize to center */
}

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

.menu ul ul {
   width:130px; 
}

      /* float the list to make it horizontal and a relative position so that you can control the dropdown 
menu position */
.menu li {
   float:left;
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   font-size:12pt;
   text-decoration:none; 
   color:white;
   background:;
  border:; 
  border-width:; 
   font-family: arial;
   width:auto;            /* Defines the main box dimensions. */
   height:25px;           /*How tall your cells are */
   line-height:25px;      /*Adjust this to vertically center your text in each cell. Should be about the 

same as height. */
   padding: 0 10px;
   min-width: 20px;
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
    {width:130px; w\idth:130px;}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:;}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:white;}
.menu ul ul :hover > a.drop {background:white;}

      /* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:;}  /* not FF */

      /* style the third level hover */
.menu ul ul ul a:hover {background:;}
.menu ul ul ul :hover > a {background:;}     /* 3rd (w/o 4th) 4th hover */

      /* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:25px;
   left:0; 
   width:150px;  /* Size of the daughter cells */
}

      /* another hack for IE5.5 */
* html .menu ul ul 
   {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */

      /* position the third level flyout menu */
.menu ul ul ul {
   left:120px; 
   top:0;
   width:160px;
   height:auto;
}

.menu ul ul ul li a {
   color:black;
}

.menu ul ul ul li a:hover {
   color:black;
}

      /* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:130px; 
   top:0;
   width:130px;
   height: auto !important;
}

     /* 4th level non-hover */
.menu ul ul ul ul li a {
   color:black;
   width:150px;
}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:black;
   height:25px; 
   line-height:25px; 
   width:80px;
}

.menu ul ul :hover > a.drop  {background:black;}   /* 2nd if 3rd level exists */

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:white;              /* hover 2nd > 3rd & 4th */
   background:black;        /* hover 3rd > 4th */
   height:25px; 
   line-height:25px; 
   width:110px;
}

      /* yet another hack for IE5.5 */
* html .menu ul ul a 
   {width:120px; w\idth:120px;}

      /* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
   color:black;
   background:white;
}

      /* main hover */
.menu :hover > a, .menu ul ul :hover > a {
   color:white;
   background:black;
}

      /* make the 2nd level visible when hover on 1st level list OR link */
.menu ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
      /* keep the 4th level hidden when you hover on 2nd level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
      /* make the 3rd level visible when you hover over 2nd level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* make the 4th level visible when you hover over 3rd level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

What am I doing wrong????