MysticalEquine
05-08-2010, 04:58 PM
Someone here helped me with making sure the main bar stuck, now I'm having the very last problem and I have exhausted myself tying to fix it
(pic included for examples)
When the page is collapsed smaller, the hover horizontal bar goes across the page instead of directly under the main navigation bar
Example Page Normal
http://i39.photobucket.com/albums/e198/indigodreamz/Mystical%20Equine/navexample1.png
Example Page Collapsed
http://i39.photobucket.com/albums/e198/indigodreamz/Mystical%20Equine/navexample2.png
CSS For Navigation Bar
.nav {
height:35px;
background: url(images/bg2.gif) repeat-x;
/*position:absolute;
left:235px;
top:210px;*/
font-family:tahoma;
font-size:11px;
width:800px;
z-index:100;
margin:0 auto;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(images/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#ffffff;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(images/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#000000;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(images/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#112D45;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
width:794px;
position:absolute;
left:235px;
top:242px;
margin:0 auto;
background:url(images/back.gif);
padding:0;
z-index:100;
text-align:center;
}
.nav .current .show {
z-index:100;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#ffffff;
}
.nav .current .sub li.sub_show a {
color:#ffffff;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#000000;
}
Any help really really appreciated!
(pic included for examples)
When the page is collapsed smaller, the hover horizontal bar goes across the page instead of directly under the main navigation bar
Example Page Normal
http://i39.photobucket.com/albums/e198/indigodreamz/Mystical%20Equine/navexample1.png
Example Page Collapsed
http://i39.photobucket.com/albums/e198/indigodreamz/Mystical%20Equine/navexample2.png
CSS For Navigation Bar
.nav {
height:35px;
background: url(images/bg2.gif) repeat-x;
/*position:absolute;
left:235px;
top:210px;*/
font-family:tahoma;
font-size:11px;
width:800px;
z-index:100;
margin:0 auto;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(images/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#ffffff;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(images/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#000000;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(images/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#112D45;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
width:794px;
position:absolute;
left:235px;
top:242px;
margin:0 auto;
background:url(images/back.gif);
padding:0;
z-index:100;
text-align:center;
}
.nav .current .show {
z-index:100;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#ffffff;
}
.nav .current .sub li.sub_show a {
color:#ffffff;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#000000;
}
Any help really really appreciated!