Hey guys,

I recently recieved this email, so I figured I'd post it here for everyone's benefit in case there are people still in the dark.

Where did you put your code for your menu system? I'm thinking about re-designing my website, and have been looking around for ideas, saw your site, and bam, that menu is great! Any help would be appreciated. Thanks Dietrich

My reply:

Hey Deitrich,

My menu is based off of the code from http://www.cssplay.co.uk/menus/final_drop2.html
I personalized it and changed some things, most specifically the code format so I could better read and understand it. It's best viewed and edited in full screen Notepad, then copy and paste to the appropriate sections of your customization page.

There are two parts. The CSS goes in the CSS section of your customization page and the HTML goes in your header section. It seems to work great in all browsers. There may be some erroneous code in there, cuz I'm a nub, but it seems to work. If there are any issues I'm sure the Smuggers on Dgrin can help to sort it out.

I do ask that if anyone uses this, please leave in the code comments referring back to http://www.cssplay.co.uk and if you do find this code useful, please help support them.
The CSS code:

/* 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 */


/* CSS Section */

/* style the outer div to give it width */
.menu {
margin: auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:750px;     /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}
/* 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:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:100; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:125px; 
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* 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:31px;
left:0; 
width:125px;  /* Size of the daughter cells */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}


/* position the third level flyout menu */
.menu ul ul ul{
left:125px; 
top:0;
width:125px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-125px;
}

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

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:125px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

/* End Navbar Code */

The HTML/Header section code:

<!-- 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.downriverphotography.com" title="Downriver Photography">Home<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>

       <li><a href="http://www.formassembly.com/forms/25333" title="Contact Us!">Contact Us</a></li> 
       <li><a href="mailto:contact@downriverphotography.com" title="Leave Steve 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.downriverphotography.com/galleries" title="Galleries">Galleries<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

    <li><a href="http://www.downriverphotography.com/gallery/1800338" title="New Products!">New Products</a></li>
    <li><a href="http://www.downriverphotography.com/gallery/1284588" title="My Portfolio">Portfolio</a></li>
    <li><a class="drop" href="http://www.downriverphotography.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://www.downriverphotography.com/Sports/226655" title="Martial Arts">Martial Arts »<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->            

                <ul>
                    <li><a href="http://www.downriverphotography.com/gallery/1819267">2006 Renaissance Open</a></li>
                    <li><a href="http://www.downriverphotography.com/gallery/1724789">2006 Jabari Classic IV</a></li>
                    <li><a href="http://www.downriverphotography.com/gallery/1596629">2006 Oakland Explosion</a></li>
                    <li><a href="http://www.downriverphotography.com/gallery/1532599">2006 Detroit Classic</a></li>
                    <li><a href="http://www.downriverphotography.com/gallery/1471156">2006 Metro Detroit Open</a></li>
                    <li><a href="http://www.downriverphotography.com/gallery/1288104">2006 Teamforce Martial Arts</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://www.downriverphotography.com/Events" title="Events Category">Events»<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="http://www.downriverphotography.com/gallery/1621237">2006 Wyandotte Fireworks</a></li>
            <li><a href="http://www.downriverphotography.com/gallery/1747422">2006 Thunder Over Michigan Airshow</a></li>
            <li><a href="http://www.downriverphotography.com/gallery/1460085">2006 Schoolcraft College Commencement</a></li>

        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
         
    <li><a class="drop" href="http://www.downriverphotography.com/Nature" title="Nature Category">Nature»<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="http://www.downriverphotography.com/gallery/1555029">Matthaei Botanical Gardens</a></li>

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

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


<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/popshots" title="Our most popular photos!">Popular<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>
        
    <li><a href="http://www.downriverphotography.com/popshots" title="The 24 top photos">Top 24 Photos</a></li>
    <li><a href="http://www.downriverphotography.com/popular" title="The 1000 top photos">Top 1000 Photos</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<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/gallery/1571893" title="Please sign our guestbook!">Guestbook<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/gallery/1575917" title="About the photographer">The Photographer<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.downriverphotography.com/gallery/1596672" title="Our privacy policy"><font color=red>Privacy</font><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>




</ul>

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

Hope this is of use and not fulla bugs.

Steve
http://www.downriverphotography.com

EDIT: Edited to include opening <div align=center;> and closing </div> statements in the HTML code! Navbars should all center properly now.
EDIT: Add .menu if front of table {position:absolute; top:0; left:0;}

EDIT: added gte to this in the html [if gte IE 7]

Bump.

Originally Posted by Andy Bump.

Maybe a candidate for the Customization FAQ?

Hey guys,

I noticed one of the guys that viewed my page and also this thread (Yey Statcounter!) implemented a customized version of this navbar on their homepage, and although the formatting aspect seemed to be identical, the navbar was all the way to the left margin in FF. His URL is http://gregsmith.smugmug.com

After playing around with his code through the FF CSS editor (shrinking the 750px bar size, making the cells smaller and trying some centering techniques), I could NOT get the bugger to move, let alone center. I'd really love for this thread to be a total navbar solution, so, any comments/suggestions? After checking back, he's made some progress with my ugly color scheme and personalized it nicely, but the bugger is still to the left and not centered. Halp!

Steve
http://www.downriverphotography.com

I'm impressed! Here I am struggling to try and get this nav bar to center and you must be watching right over my shoulder!

I really appreciate you starting this thread and providing the skeleton code for this drop down nav bar. I'm not to good with all this code stuff. I do a lot of cutting and pasting then trying to figure out what should be modified to achieve the result I have in mind. Basically it's a ton of trial and error. I was scrounding your site in hopes of finding what code makes your nav bar center.

Anyway thanks for asking the question and I'll be keeping my eyes open for any kind of an answer.

BTW... Love your site and your photography!

Originally Posted by SteveM Hey guys, I noticed one of the guys that viewed my page and also this thread (Yey Statcounter!) implemented a customized version of this navbar on their homepage, and although the formatting aspect seemed to be identical, the navbar was all the way to the left margin in FF. His URL is http://gregsmith.smugmug.com After playing around with his code through the FF CSS editor (shrinking the 750px bar size, making the cells smaller and trying some centering techniques), I could NOT get the bugger to move, let alone center. I'd really love for this thread to be a total navbar solution, so, any comments/suggestions? After checking back, he's made some progress with my ugly color scheme and personalized it nicely, but the bugger is still to the left and not centered. Halp! Steve http://www.downriverphotography.com

Steve, I've had a drop menu for sometime now. I too adapted from CSS Play... Here's the code I have....

CSS Code

/*********************************/
/*Drop-Down/ Fly-Out Nav. Buttons*/
/*********************************/

.homepage .menu {display:none;}
/*Common Styling*/
.menu {font-family:"Gentium","Times New Roman", times, serif; width:848px; position:relative; z-index:99; font-size:12px; padding-bottom:30px; _padding-bottom:18px; margin-left:0px;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#e3cfb5; width:104px; height:20px; color:#e3cfb5; border:1px solid #D5B790; border-width:1px 1px 1px 1px; background:transparent; padding-left:0px; line-height:20px;}

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

.menu ul li ul {display:none;}

.droptable1, .droptable2, .droptable3, .droptable4, .droptable5, .droptable6, .droptable7, .droptable8 {margin:-1px; border-collapse:collapse; font-size:12px; text-align:center;}

/*Specific to Non-IE browsers*/
.menu ul li:hover a {color:#8f7b62; background:#000000;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; margin-top:0px; left:0; width:104px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#000000; color:#e3cfb5; height:auto; line-height:20px; padding:0px 0px; width:132px}

.menu ul li:hover ul li a.drop {background:#000000 url(http://brandolinoimaging.smugmug.com/photos/71621859-O.gif) bottom right no-repeat;}

.menu ul li:hover ul li a:hover {background:#000000; color:#8f7b62;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:134px; top:10px; width:134px;}
.menu ul li:hover ul li:hover ul.left {left:-134px;}

/*Specific to IE browsers*/
.menu ul li a:hover {color:#8f7b62; background:#000000;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; background:#000000; margin-top:0px; marg\in-top:0px;}
.menu ul li a:hover ul li a {display:block; background:#000000; color:#e3cfb5; height:auto; line-height:20px; padding:0px 0px; width:132px; w\idth:132px;}

.menu ul li a:hover ul li a.drop {background:#000000 url(http://brandolinoimaging.smugmug.com/photos/71621859-O.gif) bottom right no-repeat;}

.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:#000000; color:#8f7b62;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:10px; color:#8f7b62; left:134px;}
.menu ul li a:hover ul li a:hover ul.left {left:-134px;}

HTML (Header) Code

<!-- Drop Nav Bar -->
<div align="center">
<div class="menu">
<ul>
<li><a href="http://brandolinoimaging.com/gallery/1595381/">Home Page</a></li>

<li><a class="drop" href="http://brandolinoimaging.com/gallery/1106521">Pricing and Services
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table class="droptable1"><tr><td>

    <ul>
        <li><a href="http://brandolinoimaging.com/gallery/1097405" title="Full List of Available Prints and Products">Prints and Products</a></li>
        <li><a href="http://brandolinoimaging.com/gallery/1096855" title="Estimated Shipping">Estimated Shipping</a></li>
        <li><a href="http://brandolinoimaging.com/gallery/1534565" title="Help with Cart">Help with Cart</a></li>
        <li><a href="http://brandolinoimaging.com/gallery/1096449" title="Our Guarantee">Our Guarantee</a></li>
    </ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://brandolinoimaging.com/gallery/1081614">The Photographer</a></li>

<li><a class="drop" href="http://brandolinoimaging.com/featured">Image Galleries
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable2"><tr><td>

    <ul>

        <li><a href="http://brandolinoimaging.com/keyword/" title="'Image Search' Page">'Image Search' Page</a></li>

        <li><a class="drop" href="http://brandolinoimaging.com/My%20Portfolio" title="My Portfolio">My Portfolio
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable3"><tr><td>
        <ul>
                <li><a href="http://brandolinoimaging.com/gallery/1642061" title="Published Images">Published Images</a></li>
                <li><a href="http://brandolinoimaging.com/My%20Portfolio/167575" title="Dance and Theatrical Performances">Dance and Theater</a></li>
            <li><a href="http://brandolinoimaging.com/My%20Portfolio/167579" title="Landscape Photography">Landscape Photography</a></li>
            <li><a href="http://brandolinoimaging.com/My%20Portfolio/167578" title="Event Photography">Event Photography</a></li>
                <li><a href="http://brandolinoimaging.com/My%20Portfolio/167577" title="Sports Images">Sports Images</a></li>
                <li><a href="http://brandolinoimaging.com/My%20Portfolio/167576" title="Wildlife Photos">Wildlife Photos</a></li>
        </ul>
</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

    </li>

    <li><a href="http://brandolinoimaging.com/European%20Tour%202003" title="European Tour 2003">European Tour</a></li>
    

    <li><a class="drop" href="http://brandolinoimaging.com/Sports%20Images" title="Sporting Events">Sporting Events
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable4"><tr><td>
        <ul>
                <li><a href="http://brandolinoimaging.com/Sports%20Images/167572" title="Football: Regular Season">Football: Regular Season</a></li>
            <li><a href="http://brandolinoimaging.com/Sports%20Images/167573" title="Football: IHSA State Play-Offs">Football: State Play-Offs</a></li>
            <li><a href="http://brandolinoimaging.com/Sports%20Images/167527" title="Basketball">Basketball</a></li>
                <li><a href="http://brandolinoimaging.com/Sports%20Images/167526" title="Baseball and Softball">Baseball and Softball</a></li>
                <li><a href="http://brandolinoimaging.com/Sports%20Images/182886" title="Soccer">Soccer</a></li>
        </ul>
</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

    </li>

            <li><a href="http://brandolinoimaging.com/Event%20Photography" title="Event Photography">Event Photography</a></li>
        <li><a href="http://brandolinoimaging.com/Portrait%20Shots" title="Portaits">Portraits</a></li>
    </ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://brandolinoimaging.com/gallery/1081608">Image Processing</a></li>

<li><a class="drop" href="http://brandolinoimaging.com/gallery/1519322">OBD Gallery
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable5"><tr><td>

    <ul>

        <li><a class="drop" href="http://brandolinoimaging.com/The%20Broadway%20Dance%20Center%202006/193781" title="Recital 2006: La Vie Boheme">Recital 2006
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable6"><tr><td>
        <ul>
                <li><a href="http://brandolinoimaging.com/gallery/1549917" title="Sr. Company Graduates">Sr. Company Graduates</a></li>
                <li><a href="http://brandolinoimaging.com/gallery/1519194" title="Tech. Rehearsal">Tech. Rehearsal</a></li>
            <li><a href="http://brandolinoimaging.com/gallery/1519239" title="Dress Rehearsal">Dress Rehearsal</a></li>
            <li><a href="http://brandolinoimaging.com/gallery/1519249" title="Opening Night">Opening Night</a></li>
                <li><a href="http://brandolinoimaging.com/gallery/1519257" title="Saturday Show">Saturday Show</a></li>
                <li><a href="http://brandolinoimaging.com/gallery/1519261" title="Sunday Show">Sunday Show</a></li>
        </ul>
</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

    </li>

    <li><a class="drop" href="http://brandolinoimaging.com/The%20Broadway%20Dance%20Center%202006" title="2006 Performance Season">2006 Performance Season
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable7"><tr><td>
        <ul>
                <li><a href="http://brandolinoimaging.com/gallery/1573194" title="Celebration in The Park">Celebration in The Park</a></li>
            <li><a href="http://brandolinoimaging.com/gallery/1629085" title="Taste of Chicago (7-3-06)">Taste of Chicago (7-3-06)</a></li>
            <li><a href="http://brandolinoimaging.com/gallery/1630603" title="Taste of Chicago (7-4-06)">Taste of Chicago (7-4-06)</a></li>
                <li><a href="http://brandolinoimaging.com/gallery/1670186" title="Braidwood SummerFest">Braidwood SummerFest</a></li>
                <li><a href="http://brandolinoimaging.com/gallery/1726277" title="Party in The Park">Party in The Park</a></li>
                <li><a href="http://brandolinoimaging.com/gallery/1872898" title="Diamond Days">Diamond Days</a></li>
                    </ul>
</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

    </li>

            <li><a class="drop" href="javascript:void(0)" title="2005 Performances">2005 Performances<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table class="droptable8"><tr><td>
        <ul>
                <li><a href="http://brandolinoimaging.com/The%20Broadway%20Dance%20Center%202005/142626" title="Recital 2005">Recital 2005</a></li>
        <li><a href="http://brandolinoimaging.com/The%20Broadway%20Dance%20Center%202005/142627" title="Summer 2005">Summer 2005</a></li>
        <li><a href="http://brandolinoimaging.com/The%20Broadway%20Dance%20Center%202005/142628" title="Fall 2005">Fall 2005</a></li>
                <li><a href="http://brandolinoimaging.com/The%20Broadway%20Dance%20Center%202005/142629" title="Winter 2005-2006">Winter 2005-2006</a></li>
                    </ul>
</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

    </li>

    </ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://brandolinoimaging.com/gallery/1091885">My Gear</a></li>
<li><a href="http://brandolinoimaging.com/gallery/1081632">Contact Us</a></li>

</ul>
</div>
</div>
<!-- End Drop Nav Bar-->

Notice the 2 red lines in the HTML section.... Now this will only work if the total width of the nav bar is not too wide for the page.... But I believe that may be all that is needed....

Brando for the win!

It actually looks like that might have been omitted from my HTML at some point, somehow, cuz I believe I have an extra closing </div> in my code. I took out my CSS margin:auto; which threw my bar to the left, and just added a <div align="center"> at the beginning of the HTML code just as you showed and it worked like a charm.

Greg, if you add the
<div align="center"> before the div class statement in the header/HTML section and at the very end just as Brando shows, you should be golden!

Thanks Brando! I'm going to go edit the original post.

Steve
http://www.downriverphotography.com

Great post Steve. Got my navbar (almost working). One thing I'm having trouble with is the Guestbook. I would like the text next to the picture (like yours) instead of on top. How do you do that??

Greg

gregt1310.smugmug.com

Originally Posted by gregt1310 Great post Steve. Got my navbar (almost working). One thing I'm having trouble with is the Guestbook. I would like the text next to the picture (like yours) instead of on top. How do you do that?? Greg gregt1310.smugmug.com

Smugmug's down right now with a rare outtage that shouldn't last much longer, so I can't see either of our pages. But I assume your text is in the Gallery Description field. If you put it in the individual photo description field, it should appear on the side and wrap around the photo if you're using the Journal Style. I'll take a peek when we're back up.

Steve
http://www.downriverphotography.com

STeve, That is rare for Smugmug to have an outage. I think I understand what you are saying about putting the description on the photo and not on the gallery. I'll try that once sm comes back up.

Another question if you don't mind. I have some text on my football gallery. Same thing as above. Any way to get the text out to the side instead of on top? Also, can you use standard html tags to change font color and size??

Thanks again.
Greg

gregt1310.smugmug.com

Originally Posted by gregt1310 STeve, That is rare for Smugmug to have an outage. I think I understand what you are saying about putting the description on the photo and not on the gallery. I'll try that once sm comes back up. Another question if you don't mind. I have some text on my football gallery. Same thing as above. Any way to get the text out to the side instead of on top? Also, can you use standard html tags to change font color and size?? Thanks again. Greg gregt1310.smugmug.com

There are immeasurable ways to move and format text with CSS. I'm definitely not the CSS guy to ask, so I'm going to leave this for one of the CSS god types. I imagine you could easily move the text description box wherever you like with positioning commands in CSS. And yes, you can use color and font HTML in descriptions and the like, I have it on a couple places on my page as well, but it's generally because I'm lazy and didn't want to figure out the right way to do it in CSS. It probably would be much more efficiently controlled with CSS.

Post your specifics, as to colors and position and what text and we'll take a look and see what we can come up with.

Steve
http://www.downriverphotography.com

Thanks Steve

I finally got this to look just the way I want it on FireFox but I notice now using IE that only one of the drop downs actually works. Any thoughts on this one? I played with the IE hack numbers but so far no luck. I'm baffled as to why one of the pull downs would work and not the other.

I also much prefer the look I get in Firefox with the very thin black border separating the nav buttons. In IE there is a much wider gap for some reason.

Thanks again for all of your help.

www.gsmithphoto.com

Originally Posted by SteveM Brando for the win! It actually looks like that might have been omitted from my HTML at some point, somehow, cuz I believe I have an extra closing </div> in my code. I took out my CSS margin:auto; which threw my bar to the left, and just added a <div align="center"> at the beginning of the HTML code just as you showed and it worked like a charm. Greg, if you add the <div align="center"> before the div class statement in the header/HTML section and at the very end just as Brando shows, you should be golden! Thanks Brando! I'm going to go edit the original post. Steve http://www.downriverphotography.com

Originally Posted by GSmith Thanks Steve I finally got this to look just the way I want it on FireFox but I notice now using IE that only one of the drop downs actually works. Any thoughts on this one? I played with the IE hack numbers but so far no luck. I'm baffled as to why one of the pull downs would work and not the other. I also much prefer the look I get in Firefox with the very thin black border separating the nav buttons. In IE there is a much wider gap for some reason. Thanks again for all of your help. www.gsmithphoto.com

All the drop downs are working for me...

Originally Posted by brandofamily HTML (Header) Code <!-- Drop Nav Bar --> <div align="center"> <div class="menu"> <ul> <li><a href="http://brandolinoimaging.com/gallery/1595381/">Home Page</a></li> <li><a class="drop" href="http://brandolinoimaging.com/gallery/1106521">Pricing and Services <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable1"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/gallery/1097405" title="Full List of Available Prints and Products">Prints and Products</a></li> <li><a href="http://brandolinoimaging.com/gallery/1096855" title="Estimated Shipping">Estimated Shipping</a></li> <li><a href="http://brandolinoimaging.com/gallery/1534565" title="Help with Cart">Help with Cart</a></li> <li><a href="http://brandolinoimaging.com/gallery/1096449" title="Our Guarantee">Our Guarantee</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="http://brandolinoimaging.com/gallery/1081614">The Photographer</a></li> <li><a class="drop" href="http://brandolinoimaging.com/featured">Image Galleries <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable2"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/keyword/" title="'Image Search' Page">'Image Search' Page</a></li> <li><a class="drop" href="http://brandolinoimaging.com/My%20Portfolio" title="My Portfolio">My Portfolio <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable3"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/gallery/1642061" title="Published Images">Published Images</a></li> <li><a href="http://brandolinoimaging.com/My%20Portfolio/167575" title="Dance and Theatrical Performances">Dance and Theater</a></li> <li><a href="http://brandolinoimaging.com/My%20Portfolio/167579" title="Landscape Photography">Landscape Photography</a></li> <li><a href="http://brandolinoimaging.com/My%20Portfolio/167578" title="Event Photography">Event Photography</a></li> <li><a href="http://brandolinoimaging.com/My%20Portfolio/167577" title="Sports Images">Sports Images</a></li> <li><a href="http://brandolinoimaging.com/My%20Portfolio/167576" title="Wildlife Photos">Wildlife Photos</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="http://brandolinoimaging.com/European%20Tour%202003" title="European Tour 2003">European Tour</a></li> <li><a class="drop" href="http://brandolinoimaging.com/Sports%20Images" title="Sporting Events">Sporting Events <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable4"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/Sports%20Images/167572" title="Football: Regular Season">Football: Regular Season</a></li> <li><a href="http://brandolinoimaging.com/Sports%20Images/167573" title="Football: IHSA State Play-Offs">Football: State Play-Offs</a></li> <li><a href="http://brandolinoimaging.com/Sports%20Images/167527" title="Basketball">Basketball</a></li> <li><a href="http://brandolinoimaging.com/Sports%20Images/167526" title="Baseball and Softball">Baseball and Softball</a></li> <li><a href="http://brandolinoimaging.com/Sports%20Images/182886" title="Soccer">Soccer</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="http://brandolinoimaging.com/Event%20Photography" title="Event Photography">Event Photography</a></li> <li><a href="http://brandolinoimaging.com/Portrait%20Shots" title="Portaits">Portraits</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="http://brandolinoimaging.com/gallery/1081608">Image Processing</a></li> <li><a class="drop" href="http://brandolinoimaging.com/gallery/1519322">OBD Gallery <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable5"><tr><td> <ul> <li><a class="drop" href="http://brandolinoimaging.com/The%20B...%202006/193781" title="Recital 2006: La Vie Boheme">Recital 2006 <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable6"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/gallery/1549917" title="Sr. Company Graduates">Sr. Company Graduates</a></li> <li><a href="http://brandolinoimaging.com/gallery/1519194" title="Tech. Rehearsal">Tech. Rehearsal</a></li> <li><a href="http://brandolinoimaging.com/gallery/1519239" title="Dress Rehearsal">Dress Rehearsal</a></li> <li><a href="http://brandolinoimaging.com/gallery/1519249" title="Opening Night">Opening Night</a></li> <li><a href="http://brandolinoimaging.com/gallery/1519257" title="Saturday Show">Saturday Show</a></li> <li><a href="http://brandolinoimaging.com/gallery/1519261" title="Sunday Show">Sunday Show</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a class="drop" href="http://brandolinoimaging.com/The%20B...0Center%202006" title="2006 Performance Season">2006 Performance Season <!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable7"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/gallery/1573194" title="Celebration in The Park">Celebration in The Park</a></li> <li><a href="http://brandolinoimaging.com/gallery/1629085" title="Taste of Chicago (7-3-06)">Taste of Chicago (7-3-06)</a></li> <li><a href="http://brandolinoimaging.com/gallery/1630603" title="Taste of Chicago (7-4-06)">Taste of Chicago (7-4-06)</a></li> <li><a href="http://brandolinoimaging.com/gallery/1670186" title="Braidwood SummerFest">Braidwood SummerFest</a></li> <li><a href="http://brandolinoimaging.com/gallery/1726277" title="Party in The Park">Party in The Park</a></li> <li><a href="http://brandolinoimaging.com/gallery/1872898" title="Diamond Days">Diamond Days</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a class="drop" href="javascript:void(0)" title="2005 Performances">2005 Performances<!--[if IE 7]><!--> </a> <!--<![endif]--> <table class="droptable8"><tr><td> <ul> <li><a href="http://brandolinoimaging.com/The%20B...%202005/142626" title="Recital 2005">Recital 2005</a></li> <li><a href="http://brandolinoimaging.com/The%20B...%202005/142627" title="Summer 2005">Summer 2005</a></li> <li><a href="http://brandolinoimaging.com/The%20B...%202005/142628" title="Fall 2005">Fall 2005</a></li> <li><a href="http://brandolinoimaging.com/The%20B...%202005/142629" title="Winter 2005-2006">Winter 2005-2006</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="http://brandolinoimaging.com/gallery/1091885">My Gear</a></li> <li><a href="http://brandolinoimaging.com/gallery/1081632">Contact Us</a></li> </ul> </div> </div> <!-- End Drop Nav Bar--> Notice the 2 red lines in the HTML section.... Now this will only work if the total width of the nav bar is not too wide for the page.... But I believe that may be all that is needed....

Why add that extra div to center it? Why not add this to .menu:

IDIOT EDIT: So I'm an idiot. Read this about centering things and this particular version of the navbar.

Then delete that extra (and not so semantic) <div align="center"> and corresponding </div>.

Why my site is not working with the same code, it broken in IE??
here is my site url
http://photography.beeplove.com


Thanks,

Hmmm... I just checked it from my PC at work and as you said they all seem to be working.

Must be an issue with my home computer possibly an earlier version cached thats causing problems. Thanks for the info.

Originally Posted by brandofamily All the drop downs are working for me...

On firefox its working fine, but on IE submenu doesn't disappear after taking the mouse away from menu.

Thanks,

I have fixed submenu appear and disappear issue.

If you looked at my site, on Firefox it just work nice.
On IE, I still have one issue left, navbar doesn't appear horizontal.

Another small issue,
there have little gap/margin between menu and drop (Galleries and list of Galleries). How can I remove that gap or margin.

Thanks,

Originally Posted by beeplove I have fixed submenu appear and disappear issue. If you looked at my site, on Firefox it just work nice. On IE, I still have one issue left, navbar doesn't appear horizontal. Another small issue, there have little gap/margin between menu and drop (Galleries and list of Galleries). How can I remove that gap or margin. Thanks,

Try adjusting the red number to move the drop menu up into place...

/* 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:                 20px;
  left:                 0; 
  width:                100px;  /* Size of the daughter cells */