My Site: http://www.centerearthphotoart.com/
Trying to follow along with Mr. Allen's http://allen-steve.smugmug.com/gallery/2011077 tutorial. Got my menu items set up the way I need them. Now the thing I'm finding tricky is how to place the menu bar and change the colors.
CSS is a big scary monster, lol. I just want the menu items to show up as black text and when hovered over change the text color to a dark gray. That's it. No vibrant or bold color boxes and such. I'm not certain what all I need to change in the CSS to get it that way. There's just too much there and it hurts my brain. @_@;
As for the hover position, I had the prior navbar up top right across from the banner. But if I have to change that due to the drop menu not liking that position I'm thinking of having everything centered again up top, drop menu below the banner.
Help? :)
Try this CSS, changed all the colors, cell widths and nav position.
Change ong the colors is just look down thru CSS for hover and non-hover
colors and backgrounds. Shouild be a comment for each.
/* Common Styling */
.menu {
float: right;
margin: -60px 0 0; /* top right/left bottom */
display: block;
z-index: 99;
/* padding: 20px 0px 30px 0px; */ /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 480px; /* 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: 12pt; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 80px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: #746552; /* 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: 80px; w\idth: 80px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #746552; /* main when hover DD */
}
.menu ul li:hover ul {
z-index:99;
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: #746552; /* DD FO non-hover */
color: #000; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 120px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: #746552; /* DD FO hover */
color: #ccc; /* DD FO hover */
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* 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: #ccc; /* main hover */
background: #746552; /* main hover */
}
.menu ul li a:hover ul {
z-index:99;
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: #746552; /* IE DD color non-hover */
color: #000; /* 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: #746552; /* DD FO hover */
color: #ccc; /* DD FO hover */
}
.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #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;
}
/* ==== END NAVBAR CODE ==== */
Start and stop your html without a ny breaks like this.
<div id="my_header">
<div id="my_banner"> </div>
<div class="menu">
<ul>
<li><a href="http://www.centerearthphotoart.com/">Home</a></li>
...
...
...
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div> <!-- closes my_header -->