CSS menu problem

englishpremier · 18 Apr 2008 at 14:50

Hi

I'm trying to convert my website over to modx CMS - i've hit a number of problems but have managed to fix most of them.

the current issue i'm working on is the drop down menu.

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.

Code:

/******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

Ross1234 · 18 Apr 2008 at 15:58

hurray, another modx user!

But sorry I can't fix your css

englishpremier · 18 Apr 2008 at 17:00

I took a look at modx after you recommended it in another thread.

I really like where its going its just a bit difficult for me being a non programmer.

Modx is very easy to get a basic site up though.

I'm very good at cut and paste mind ;-)

Ross1234 · 18 Apr 2008 at 17:45

yes, im no programmer either, but modx is really good.

Have you tried posting in their forum? They are a really helpful bunch.

xirokx · 19 Apr 2008 at 11:00

try here http://www.cssplay.co.uk/menus/

1. find menu you require yours to be like
2. compare css / html to yours
3. make changes..
4. if you cannot fix the problem, change it to one used in the links so you know the CSS works.

that may solve your problem?

good luck