Help Please

[mrjoe]

Hi Everyone
Hope someone will help with this It is making me NUTS
www.photographybymrjoe.com (http://www.photographybymrjoe.com)

I am tring to get dropdowns and flyouts to work with my Dance page I have went to the Steve Allen Tutor and this is what i came up with.


<div class="menu">
<ul>
<li><a href="Link">Home</a></li>
<li><a href="Link">Contact</a></li>
<li><a href="Link">Dance</a></li>
<li><a href="Link">Galleries</a></li>
<li><a href="Link">Posters</a></li>
<li><a href="Link">Sports</a></li>
<li><a href="Link">Pricing</a></li>
<li><a href="Link">GuestBook</a></li>
<div class="menu">
<ul>
<li><a href="Link">Home</a></li>
<li><a href="Link">Contact</a></li>
<li><a class="drop" href="Link">Dance
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">IDC</a></li>
<li><a href="Link">Dance America</a></li>
<li><a href="Link"></a></li>
<li><a href="Link"></a></li>
<li><a href="Link"></a></li>
<li><a class="drop" href="Link">IDC
<li><a class="drop" href="Link">Dance America
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">A Birds Song</a></li>
<li><a href="Link">Beat of my Heart</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 href="Link">Galleries</a></li>
<li><a href="Link">Posters</a></li>
<li><a href="Link">Sports</a></li>
<li><a href="Link">Pricing</a></li>
<li><a href="Link">GuestBook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

When i put this in with my Nav bar all of the wording come out on my home page.
When i put this in my CSS nothing happen. So please could some let me know what to do.....


Thanks:dunno

[Allen]

Hi Everyone
Hope someone will help with this It is making me NUTS
www.photographybymrjoe.com (http://www.photographybymrjoe.com)

I am tring to get dropdowns and flyouts to work with my Dance page I have went to the Steve Allen Tutor and this is what i came up with.

...

When i put this in with my Nav bar all of the wording come out on my home page.
When i put this in my CSS nothing happen. So please could some let me know what to do.....


Thanks:dunno
Remove all that html from your CSS, it goes in your header replacing the
navcontainer html.

This page has the CSS
http://allen-steve.smugmug.com/gallery/2078255

See if this gets you started, goes in header.

<div id="my_banner"> </div>

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7118467_kJTvB">Contact</a></li>
<li><a href="/Dance">Dance
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">IDC</a></li>
<li><a href="Link">Dance America
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">A Birds Song</a></li>
<li><a href="Link">Beat of my Heart</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Link"></a></li>
<li><a href="Link"></a></li>
<li><a href="Link"></a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a href="/Posters">Posters</a></li>
<li><a href="/Sports">Sports</a></li>
<li><a href="/gallery/7213160_ctZJf">Pricing</a></li>
<li><a href="/gallery/7094542_jBwRB">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

[mrjoe]

Ok Allen thanks

Now I am working on changing the color but i have over lapping buttons i have 5 on the top and 4 on the bottom. I would like them across the top. I maybe asking about color changes too. Thanks again Joe










Remove all that html from your CSS, it goes in your header replacing the
navcontainer html.

This page has the CSS
http://allen-steve.smugmug.com/gallery/2078255

See if this gets you started, goes in header.

<div id="my_banner"> </div>

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7118467_kJTvB">Contact</a></li>
<li><a href="/Dance">Dance
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">IDC</a></li>
<li><a href="Link">Dance America
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">A Birds Song</a></li>
<li><a href="Link">Beat of my Heart</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Link"></a></li>
<li><a href="Link"></a></li>
<li><a href="Link"></a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a href="/Posters">Posters</a></li>
<li><a href="/Sports">Sports</a></li>
<li><a href="/gallery/7213160_ctZJf">Pricing</a></li>
<li><a href="/gallery/7094542_jBwRB">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

[Allen]

Ok Allen thanks

Now I am working on changing the color but i have over lapping buttons i have 5 on the top and 4 on the bottom. I would like them across the top. I maybe asking about color changes too. Thanks again Joe
First remove this at the bottom of your header box.

__________________


&lt;


Change the nav CSS to this. Entered some colors for starters. Also sets
width in first rule to center nav and not go to two lines.

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

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 930px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

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

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11pt; /* main buttons */
color: #00BFFF; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid #00000; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


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

.menu ul li ul {
display: none;}

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

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

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

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

.menu ul li:hover ul li a {
display: block;
background: 00000FF; /* DD FO non-hover */
color: #00BFFF; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 130px; /* DD FO box width */
}

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

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

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

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

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

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #00BFFF; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

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

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

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

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

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

/* another hack for IE5.5 */

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

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

/* yet another hack for IE5.5 */

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

/*END EXTRA ADDS FOR IE*/

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

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

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

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

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

[Allen]

...
Another option is reduce the number of main buttons. After my last posts code is entered you can try this.

Change the header to this.

<div id="my_banner"> </div>

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7118467_kJTvB">Contact</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Dance">Dance >
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">IDC</a></li>
<li><a href="Link">Dance America
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">A Birds Song</a></li>
<li><a href="Link">Beat of my Heart</a></li>
<li><a href="Link">future use</a></li>
<li><a href="Link">future use</a></li>
<li><a href="Link">future use</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 href="/Portraits">Portraits</a></li>
<li><a href="/Posters">Posters</a></li>
<li><a href="/Sports">Sports</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7213160_ctZJf">Pricing</a></li>
<li><a href="/gallery/7094542_jBwRB">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

New nav CSS using the fewer buttons.

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

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 520px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

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

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11pt; /* main buttons */
color: #00BFFF; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid #00000; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


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

.menu ul li ul {
display: none;}

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

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

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

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

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #00BFFF; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 130px; /* DD FO box width */
}

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

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

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

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

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

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #00BFFF; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

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

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

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

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

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

/* another hack for IE5.5 */

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

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

/* yet another hack for IE5.5 */

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

/*END EXTRA ADDS FOR IE*/

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

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

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

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

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

[mrjoe]

Thanks again allen

I still have one butten below on the left i would like to bring this one up i think this can be done by shorten the distance between the buttons. I also would like the have the botton ia a blue border (0000FF) just dont know were to put it.

When tring to go to the drop down (Dance) the drop is there but i can not click on it did i do something wrong.


I want you to know you are a BIG help thinks




Hey Allen I went and checked all my buttons and on my home page i have all my galleries below my flashshow and on my galley page I have a flashshow also. Cany we fix that also....


Another option is reduce the number of main buttons. After my last posts code is entered you can try this.

Change the header to this.

<div id="my_banner"> </div>

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7118467_kJTvB">Contact</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Dance">Dance >
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">IDC</a></li>
<li><a href="Link">Dance America
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">A Birds Song</a></li>
<li><a href="Link">Beat of my Heart</a></li>
<li><a href="Link">future use</a></li>
<li><a href="Link">future use</a></li>
<li><a href="Link">future use</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 href="/Portraits">Portraits</a></li>
<li><a href="/Posters">Posters</a></li>
<li><a href="/Sports">Sports</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7213160_ctZJf">Pricing</a></li>
<li><a href="/gallery/7094542_jBwRB">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

New nav CSS using the fewer buttons.

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

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 520px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

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

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11pt; /* main buttons */
color: #00BFFF; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid #00000; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


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

.menu ul li ul {
display: none;}

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

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

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

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

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #00BFFF; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 130px; /* DD FO box width */
}

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

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

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

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

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

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #00BFFF; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

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

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

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

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

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

/* another hack for IE5.5 */

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

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

/* yet another hack for IE5.5 */

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

/*END EXTRA ADDS FOR IE*/

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

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

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

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

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

[Allen]

Thanks again allen

I still have one butten below on the left i would like to bring this one up i think this can be done by shorten the distance between the buttons. I also would like the have the botton ia a blue border (0000FF) just dont know were to put it.

When tring to go to the drop down (Dance) the drop is there but i can not click on it did i do something wrong.


I want you to know you are a BIG help thinks What browser and OS are you using?

It's wrapping to two lines because the width in the first rule, .menu, is not
big enough. Increase it by 10px at a time until it doesn't wrap. Also IE
might take a different width so would add in this line.


.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 520px; /* width of menu - minimize this until doesn't wrap to two
lines - too large effects centering */
_width: 530px; /* IE6 only */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

For IE change the top in this to remove the gap so the mouse doesn't lose the drop.

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

[mrjoe]

I use internet explorer i think that is what you are asking and win xp per.



Not sure what to do with this.

For IE change the top in this to remove the gap so the mouse doesn't lose the drop.

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


What browser and OS are you using?

It's wrapping to two lines because the width in the first rule, .menu, is not
big enough. Increase it by 10px at a time until it doesn't wrap. Also IE
might take a different width so would add in this line.


.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 520px; /* width of menu - minimize this until doesn't wrap to two
lines - too large effects centering */
_width: 530px; /* IE6 only */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

For IE change the top in this to remove the gap so the mouse doesn't lose the drop.

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

[Allen]

I use internet explorer i think that is what you are asking and win xp per.



Not sure what to do with this.

For IE change the top in this to remove the gap so the mouse doesn't lose the drop.

Code:
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}
That's an existing rule in your CSS.
Change the top: 0px; to zero and the gap should disappear.

[mrjoe]

Allen please take a look at my site and you will see the things Im talking about .

Home page problem
Gallery problem
Button problem

because I am lost
www.photogtaphybymrjoe.com (http://www.photogtaphybymrjoe.com)

Joe






That's an existing rule in your CSS.
Change the top: 0px; to zero and the gap should disappear.

[Allen]

Allen please take a look at my site and you will see the things Im talking about .

Home page problem
Gallery problem
Button problem

because I am lost
www.photogtaphybymrjoe.com (http://www.photogtaphybymrjoe.com)

Joe
I'm lost too :D What am I looking for again?

[mrjoe]

Could someone please look and tell me what i am doing wrong with my codes. (www.photographtbymrjoe.com (http://www.photographtbymrjoe.com))


I was working on this the other day and allen was givin me some help. I had to stop and now i am tring to work on it again. When i put in the CSS code that allen gave me my nav bar does not work right. All my buttons are the for the home page and i have thumbs at the bottom of the pages.I my be putting it in the wrong place in the CSS. I thank i have the header code I thank.

Here is the 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 */

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 520px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

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

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11pt; /* main buttons */
color: #00BFFF; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid #00000; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


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

.menu ul li ul {
display: none;}

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

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

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

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

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #00BFFF; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 130px; /* DD FO box width */
}

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

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

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

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

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

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #00BFFF; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

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

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

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

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

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

/* another hack for IE5.5 */

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

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

/* yet another hack for IE5.5 */

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

/*END EXTRA ADDS FOR IE*/

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

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

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

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

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










Allen please take a look at my site and you will see the things Im talking about .

Home page problem
Gallery problem
Button problem

because I am lost
www.photogtaphybymrjoe.com (http://www.photogtaphybymrjoe.com)

Joe