Hi there,
Slowly working through the problems on my site. The current issue i’m working on is the drop down menu.
http://www.eastcoastlacrosse.co.uk/modx/playlacrosse/"" target="_blank" rel="nofollow">http://www.eastcoastlacrosse.co.uk/modx/playlacrosse/
The menu items "Mens", "Gallery" and "Latest News" should all be drop down menus, which they kind of are, but there is a styling problem.
I was wondering is some you bright CSS guys could identify the problem from my style sheet.
/******RESET DEFAULTS*******/*
* {
margin : 0;
padding : 0;
}
/*******DROP SHADOW*******/
.dropshadow {
background : transparent url(../images/dropshadowborder.jpg) repeat-y;
width : 719px;
height : auto;
margin : 0 auto;
}
/******GLOBAL STYLES*******/
body {
font-family : verdana, Arial, Georgia, Palatino, serif;
background-color : #767676;
}
h1 {
color : #b9cadd;
font-size : 20px;
}
h2 {
font-size : 20px;
}
span {
display : none;
}
img {
padding-top : 4px;
padding-bottom : 3px;
padding-left : 4px;
}
.p1 {
padding-top : 8px;
padding-left : 8px;
padding-right : 20px;
padding-bottom : 8px;
}
#wrapper {
margin : 0 auto;
width : 608px;
background-color : #525252;
border : 2px solid #ffffff;
}
h1.banner {
width : 608px;
height : 130px;
background : url(../images/banner.jpg) no-repeat center top;
}
/*******NAVIGATION*******/
#navigation {
width : 608px;
height : 36px;
background : url(../images/NavBar.jpg) no-repeat center top;
border-top : 2px solid #ffffff;
}
#navigation ul {
padding-top : 1px;
list-style : none;
width : 608px;
height : 35px;
}
#navigation ul li {
float : left;
}
#navigation ul a {
float : left;
padding-left : 10px;
padding-right : 10px;
padding-top : 1px;
height : 20px;
background : url(../images/divider.jpg) repeat-y left top;
text-decoration : none;
font-size : 12px;
color : #fff;
}
#navigation ul a:hover {
color : #9bb5db;
}
#menu ul li {
display : inline;
}
/***********links************/
a {
text-decoration : none;
}
a:link {
color : #ffffff;
text-decoration : none;
}
a:visited {
color : #9bb5db;
text-decoration : none;
}
a:hover {
color : #f4bcd7;
text-decoration : underline;
}
/*******CONTENT BOXES*******/
#maincontent {
overflow : hidden;
width : 608px;
background : #293f57 url(../images/FauxColumn.jpg) repeat-y left top;
}
#leftcontent {
width : 421px;
float : left;
font : 9pt/14pt verdana;
color : #d6e7fc;
}
#rightcontent {
width : 187px;
float : right;
font : 9pt/12pt verdana;
}
}/*******LEFT CONTENT IMAGES*******/
h2.welcome {
background-image : url(../images/Welcome.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
h2.female {
background-image : url(../images/Female.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
h2.news {
background-image : url(../images/News.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
h2.contact {
background-image : url(../images/contact.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 220px;
height : 22px;
}
/*******RIGHT CONTENT FORMATTING*******/
/*******EAST 2 TABLE*******/
#East2, #resources {
padding-top : 8px;
}
#East2 table {
margin-top : 8px;
margin-left : 8px;
font-size : 0.8em;
color : #ffffff;
width : 170px;
}
#East2 table tr {
height : 16px;
}
#East2 table tr td.center {
text-align : center;
}
#East2 table tr td.team {
width : 80px;
}
#East2 table tr td {
background-color : #59728e;
height : 20px;
}
#East2 table tr.odd td {
background-color : #6a8aac;
}
#East2 h2 {
background : url(../images/East2.jpg) no-repeat left top;
width : 187px;
height : 30px;
}
/*******RESOURCES LINKS*******/
#resources h2 {
background : url(../images/Resources.jpg) no-repeat left top;
width : 187px;
height : 30px;
}
#resources ul {
padding-top : 5px;
padding-left : 10px;
padding-right : 5px;
list-style : none;
}
#resources ul li {
padding-top : 5px;
font-size : 10px;
color : #9dbce4;
}
#resources ul li a {
text-decoration : none;
font-size : 13px;
color : #d6e7fc;
}
/*******GOOGLE SEARCH BAR*******/
#google h2 {
background : url(../images/google.jpg) no-repeat left top;
width : 187px;
height : 30px;
}
#google form {
padding-top : 10px;
padding-left : 10px;
}
/*******FOOTER*******/
#site-info {
margin : 0 auto;
background : url(../images/footerpic2.jpg);
background-repeat : no-repeat;
background-position : left 0%;
width : 719px;
height : 46px;
}
#site-info .p2 {
font-size : 11px;
color : #bababa;
padding-top : 5px;
padding-left : 205px;
}
#site-info .p2 a {
text-decoration : none;
color : #eeeeee;
}
#site-info .p2 a:hover {
color : #9bcadb;
}
/************wayfinder menu**********/
/**
* Drop down menu.
*/
.menu ul li {
position:relative;
float:left;
}
.menu ul li a {
display:block;
padding-bottom:1px;
float:left;
}
.menu ul li ul {
display:none;
}
.menu ul li:hover ul, .menu ul li.sfhover ul {
display:block;
position:absolute;
left:0px;
margin-top:25px;
z-index:10
}
.menu ul li ul li {
clear:left;
}
.menu ul li ul li a {
padding-bottom:0px;
}
/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
* html .menu ul li a:hover ul {
margin-top:0;
marg\in-top:1px;
}
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:80px
}
* html .menu ul li a:hover ul li a {
width:80px;
w\idth:129px;
}
.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
background:#c9c9a7 url(drop.gif) bottom right no-repeat;
}
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#c9c9a7;
color:#000;
}
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:130px;
top:0;
width:80px;
}
.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}
Thanks
P.s I know I haven;t styled the forms yet - I wills get round to that.
