Originally Posted by PicGirl Allen, Thanks, I will give this a quick try. http://ashleyswangerphotography.smugmug.com/

Tried it but same result as my last post. I have the links and working but they are not listed as a drop down under "gallleries". They are just listed under the nav bar as permanent links. Obviously missing something here as to how to get them under "galleries" as a drop down. Maybe I have the code in the wrong order? Or do I need some kind of CSS to make this work?

Originally Posted by PicGirl Allen, Thanks, I will give this a quick try. http://ashleyswangerphotography.smugmug.com/

Try this, got it all configured for you, colors and all.

I made the main galleries button a set width so the drop would be the same width.
Highlighted in red the extra changes to do this.

<div class="menu">
<ul>
<li><a href="/">Ashley Swanger Photography Home</a></li>
<li><a class="drop galleryWidth" href="#">Galleries
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="/Portraits">Portraits</a></li>
            <li><a href="/Sports">Sports</a></li>
            <li><a href="/Weddings">Weddings</a></li>
            <li><a href="/Family">Family</a></li>
            <li><a href="/GlamourPortrait-1">Glamour</a></li>
            <li><a href="/EngagementPhotos">Engagement</a></li>
        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.officialbigshot.com">Official Bigshot Website</a></li>
<li><a href="http://www.ashleyswangerphotoblog.com">Ashley's Blog</a></li>
<li><a href="mailto:ashleyswangerphotography@msn.com">Email Ashley</a></li>
<li><a href="http://www.ashleyswangerphotoblog.com">About Me</a></li>
</ul>
</div>
<div style="clear: both;"></div>

CSS

/* 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;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 20px;  /* top R/L bottom */
   width:750px;          /* Main bar total width, minimize to not wrap to two lines*/
}

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

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

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:black;
   background:white;
   border:1px solid black;         /* optional */        
   border-width:1px 1px 1px 1px;   /* optional */
   font-size:6pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:15px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

.menu a.galleryWidth {width:80px;}

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

      /* 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 table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

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


      /* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:22px;       /* move drop vertically */
   left:-1px;         /* move drop horizontally   */
   width:82px;    /* Size of the daughter cells */
}

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

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

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

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

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

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:white;
   background:#666;
}
      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

Originally Posted by Allen I see no CSS supporting the dropdown nav?

Allen,
I must be just missing your posts. I posted again asking that exact question...do I need some CSS. Unfortunately, don't know where to start on that. Any help?

Originally Posted by Allen Try this, got it all configured for you, colors and all. <div class="menu"> <ul> <li><a href="/">Ashley Swanger Photography Home</a></li> <li><a class="drop" href="#">Galleries <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="/Portraits">Portraits</a></li> <li><a href="/Sports">Sports</a></li> <li><a href="/Weddings">Weddings</a></li> <li><a href="/Family">Family</a></li> <li><a href="/GlamourPortrait-1">Glamour</a></li> <li><a href="/EngagementPhotos">Engagement</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.officialbigshot.com">Official Bigshot Website</a></li> <li><a href="http://www.ashleyswangerphotoblog.com">Ashley's Blog</a></li> <li><a href="mailto:ashleyswangerphotography@msn.com">Email Ashley</a></li> <li><a href="http://www.ashleyswangerphotoblog.com">About Me</a></li> </ul> </div> <div style="clear: both;"></div> CSS /* 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; position:relative; /* Make the container moveable */ margin: 0 auto 20px; /* top R/L bottom */ width:730px; /* Main bar total width, minimize to not wrap to two lines*/ } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ .menu li { float:left; /* float right will reverse the main buttons */ text-align:center; width:auto; position:relative; padding: 0; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; text-decoration:none; /* none, overline, underline */ color:black; background:white; border:1px solid black; /* optional */ border-width:1px 1px 1px 1px; /* optional */ font-size:6pt; font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif; width:auto; /* Defines the main box dimensions. */ height:20px; /* How tall your cells are */ line-height:15px; /* vertical text alignment in cell */ padding: 0 10px; /* top/bottom R/L */ min-width: 60px; /* set to smallest text and use R/L padding above to space out */ } /* main hover */ .menu a:hover, .menu :hover > a { color:white; background:#666; } /* 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 table so that it takes no part in the layout */ .menu table {position:absolute; top:0; left:0;} /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */ /* another hack for IE5.5 */ * html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */ /* hide the sub levels and give them a position absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:22px; /* move drop vertically */ left:-10px; /* move drop horizontally */ width:80px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:white;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:#666;} .menu ul ul :hover > a.drop {background:white;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:black; background:white; height:20px; line-height:15px; width:80px; } .menu ul ul :hover > a.drop {background:white;} /* 2nd if 3rd level exists */ /* yet another hack for IE5.5 */ * html .menu ul ul a {width:120px; w\idth:120px;} /* 2nd level hover */ .menu ul ul a:hover, .menu ul ul :hover > a { color:white; background:#666; } /* make the 2nd level visible when hover on 1st level */ .menu ul :hover ul {visibility:visible;} /* End Navbar Code */

Thanks Allen. I will give it a go!

Originally Posted by PicGirl Allen, I must be just missing your posts. I posted again asking that exact question...do I need some CSS. Unfortunately, don't know where to start on that. Any help?

I made some edits in post #2162, go back and paste in that html and CSS.

Originally Posted by Allen I made some edits in post #2162, go back and paste in that html and CSS.

It is pretty close. Unfortunately, I do not know how to edit the CSS to make it exactly as it appears on the site now: centered, in a line across the top. This CSS gives me a menu type format on the left side. I will work on it to see if I can tweak it. Also, this CSS lists the galleries as part of the menu. Should this be working as a dropdown under the galleries when you click on it? If so, I missed something.
Thanks for your help!

Originally Posted by PicGirl It is pretty close. Unfortunately, I do not know how to edit the CSS to make it exactly as it appears on the site now: centered, in a line across the top. This CSS gives me a menu type format on the left side. I will work on it to see if I can tweak it. Also, this CSS lists the galleries as part of the menu. Should this be working as a dropdown under the galleries when you click on it? If so, I missed something. Thanks for your help!

From post #2162 copy the html and replace your whole header with it.

From post #2162 copy the CSS and paste in at the bottom of your CSS.

Allen this is what i got what am i doing wrong?

<div class="menu">
<ul>
<li><a href="http://www.cassandrameekerphotography.com/">Home</a></li>
<li><a href="http://www.cassandrameekerphotography.com/new">Featured Session</a></li>
<li><a class="Portfolio" href="http://www.cassandrameekerphotography.com/Portfolio ">Portfolio
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Kin">Kin</a></li>
<li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Sports">Sports</a></li>
<li><a href=" http://www.cassandrameekerphotography.com/Portfolio/The-Small-Things">The Small Things Galleries</a></li>
<li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Expecting">Expecting</a></li>
<li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Blessed">Blessed</a></li>
<li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Love">Love & Unity Galleries</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cassandrameekerphotography.com/Other/Contact/24244742_Bv63hj">Contact</a></li>
<li><a href="http://www.cassandrameekerphotography.com/Other/clients/24251916_xmHNSb">Pricing</a></li>
</ul>
</div>

Originally Posted by trebor Allen this is what i got what am i doing wrong? <div class="menu"> <ul> <li><a href="http://www.cassandrameekerphotography.com/">Home</a></li> <li><a href="http://www.cassandrameekerphotography.com/new">Featured Session</a></li> <li><a class="Portfolio" href="http://www.cassandrameekerphotography.com/Portfolio ">Portfolio <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Kin">Kin</a></li> <li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Sports">Sports</a></li> <li><a href=" http://www.cassandrameekerphotography.com/Portfolio/The-Small-Things">The Small Things Galleries</a></li> <li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Expecting">Expecting</a></li> <li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Blessed">Blessed</a></li> <li><a href=" http://www.cassandrameekerphotography.com/Portfolio/Love">Love & Unity Galleries</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cassandrameekerphotography.com/Other/Contact/24244742_Bv63hj">Contact</a></li> <li><a href="http://www.cassandrameekerphotography.com/Other/clients/24251916_xmHNSb">Pricing</a></li> </ul> </div>

Just answered in this thread.
http://www.dgrin.com/showthread.php?t=226166

hi allen,
i thought I will manage to create a dropdown menu without any help, but unfortunately I did not.
I was reading the last 100 pages of this thread, hoping to get some solution, but I somewhere missed something.

I managed to create the the Links and the naming of the second level; but: the items are shown as menu item instead of being only visible if I hover about the Galleries item?

www.hansjuergenstrecker.com shows the mess up...

changing the CSS text did not change anything?

do might have a solution for me please?

br
HJS

Originally Posted by jdwl hi allen, i thought I will manage to create a dropdown menu without any help, but unfortunately I did not. I was reading the last 100 pages of this thread, hoping to get some solution, but I somewhere missed something. I managed to create the the Links and the naming of the second level; but: the items are shown as menu item instead of being only visible if I hover about the Galleries item? www.hansjuergenstrecker.com shows the mess up... changing the CSS text did not change anything? do might have a solution for me please? br HJS

Got'a name it correctly.

<div id="navcontainer">
"hint"
<div class="menu">

Everything you need to know is in the first post. Anything relevant in later posts has been
incorporated in that post.


BTW, add the red at the end, helps with page spacing.

...
</ul>
</div>
<div style="clear: both;"></div>

Originally Posted by jdwl ...

Let's get everything in the fright order.
In your header move the banner/header to the bottom

search html here first

<div class="menu">
<ul>
...
...
</ul>
</div>

<div id="my_header">
<a href="http://www.hansjuergenstrecker.com/"><img src="/img/spacer.gif"></a>
</div>

<div style="clear: both;"></div>

Remove the crossed out rule, add the searchBox rule and change the other two like this.

#my_header {
position: relative;
left: 0px;
top: 2px;
}

#searchBox {
   position:absolute;
   top:5px;
   right: 20px;
}

#my_header {
 position:absolute;
 left:20px;
 display:block;
 margin: 0;
 background: url(http://www.hansjuergenstrecker.com/photos/i-ZbpCp2w/0/O/i-ZbpCp2w-L.png);
 height: 65px;
 width: 280px;
 }

.menu {
   float:right;
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 40px auto 60px;  /* top R/L bottom */
   width:600px;          /* Main bar total width, minimize to not wrap to two lines*/
}

Originally Posted by jdwl ...

Adjusted the colors. Replace down to level 3.

/* 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;
   position:relative;    /* Make the container moveable */
   margin: 40px auto 60px;  /* top R/L bottom */
   width:580px;          /* Main bar total width, minimize to not wrap to two lines*/
}

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

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

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:none;
   font-size:12pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#aaa;
   background:none;
}

      /* 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 table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

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


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

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

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:#444;
   height:20px; 
   line-height:20px; 
   width:150px;
}

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

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

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:white;
   background:#666;
}



      /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

Originally Posted by Allen Got'a name it correctly. <div id="navcontainer"> "hint" <div class="menu"> Everything you need to know is in the first post. Anything relevant in later posts has been incorporated in that post. BTW, add the red at the end, helps with page spacing. ... </ul> </div> <div style="clear: both;"></div>

hi allen and thanks for the ultra fast reply...what do I have to name correctly? in my custom header it says <div id="navcontainer"> ?
does this somehow is a problem with my other hover settings?

and the Class Menu point? I don't get it...will try to read the first post (another thousand times ) and try to find a solution...

add the red at the end? which end? CSS or HTML? after what?

my whole navbar does not work properly...if I watch the site on my iPad it is across the whole page and after I have tried to delete my search box, my search box is now somewhere on my site...

what a successfull sunday...only because I wanted to save some hundred bugs to buy a smug mug template from fastmedia, etc.

anyway, thanks allen! u r a real smugmug hero ! ! !
br
HJS

Originally Posted by jdwl hi allen and thanks for the ultra fast reply...what do I have to name correctly? in my custom header it says <div id="navcontainer"> ? does this somehow is a problem with my other hover settings? and the Class Menu point? I don't get it...will try to read the first post (another thousand times ) and try to find a solution... add the red at the end? which end? CSS or HTML? after what? my whole navbar does not work properly...if I watch the site on my iPad it is across the whole page and after I have tried to delete my search box, my search box is now somewhere on my site... what a successfull sunday...only because I wanted to save some hundred bugs to buy a smug mug template from fastmedia, etc. anyway, thanks allen! u r a real smugmug hero ! ! ! br HJS

The name used has to agree with the CSS. Post 2172 shows how to put the html in order with the
current name class="menu" inserted. Post 2173 is new CSS for the menu down thru level 2.

Originally Posted by Allen The name used has to agree with the CSS. Post 2172 shows how to put the html in order with the current name class="menu" inserted. Post 2173 is new CSS for the menu down thru level 2.

lost in space and lost in time...something changed...but maybe I had the wrong expectation.
I thought I can let my design as it was and just ad some dropdown to my existing navbar. same layout etc.

now something happend...but we are far from the goal and far from the start
there is something wrong in the state of denmark

at least I completely killed the search box which no one ever used...success!!!

whats wrong now? again...

Originally Posted by jdwl lost in space and lost in time...something changed...but maybe I had the wrong expectation. I thought I can let my design as it was and just ad some dropdown to my existing navbar. same layout etc. now something happend...but we are far from the goal and far from the start there is something wrong in the state of denmark at least I completely killed the search box which no one ever used...success!!! whats wrong now? again...

You have this in your header

<div id="menu">

change it to this.

<div class="menu">

Originally Posted by Allen You have this in your header <div id="menu"> change it to this. <div class="menu">

allen, great!
I have managed to create the dropdown - thanks!

as a result I have realized that my homepage is too complicated...in the meantime I have changed the slideshow an the navbar.. triggering other troubles ;-)

but I will post this in the correct thread - thanks allen!
br
HJS

I'm guessing this has already been covered somewhere, but I can't find it. I added the drop down navbar code for my site and the menus are working great. Except. When the drop down hits a photo or other element on the page, the menu is pushed behind the other element. i.e. you can't see the parts of the menu that are in the same place as the photo. You can see it here: http://www.bradkehrphotography.com/ with the Portfolio tab. There should be three more drop down elements in that menu. How do I get them be seen? Thanks. (I've seen this happen on Chrome and IE Explorer. I don't know about Firefox and Safari.)

Originally Posted by chandswu I'm guessing this has already been covered somewhere, but I can't find it. I added the drop down navbar code for my site and the menus are working great. Except. When the drop down hits a photo or other element on the page, the menu is pushed behind the other element. i.e. you can't see the parts of the menu that are in the same place as the photo. You can see it here: http://www.bradkehrphotography.com/ with the Portfolio tab. There should be three more drop down elements in that menu. How do I get them be seen? Thanks. (I've seen this happen on Chrome and IE Explorer. I don't know about Firefox and Safari.)

Add the red to this.

/* style the outer div to give it width */
.menu {
z-index:99;
margin: auto !Important;
padding:0px 0px 0px 0px !Important;
position:relative !Important; /*Make the container moveable*/
width:600px !Important;     /*Main bar total width*/
font-size:0.85em !Important;
padding-bottom:60px !Important; /*Padding between the bottom of your mainbar and the rest of your page */
}

I would suggest switching to the CSS in post #1 of this tread. Much easier to work with. I would also
suggest decreasing the transparency of the drops background, hard to read text here.