CSS menu problem

englishpremier

englishpremier

englishpremier

Soldato
Joined
15 Feb 2003
Posts
10,131
Location
Europe
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
 
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 ;-)
 
You must log in or register to reply here.
Back
Top Bottom