...

View Full Version : Big CSS menu won't work properly



coderchap
09-06-2010, 06:17 PM
Really hopeful some can assist...

I'm completely by the problem I'm having getting my menu to work in this test page.
I'm desperate for help!!!!

http://www.skinspired.co.uk/test2010/index.html

I have some of these drop-downs working successfully (click on the drop-downs of Baqueira, Formigal, About Us to see.)

So I want to add sub-items for the booking link at the top, but I'm having no success. All I get is the hover behaviour.

I've simply copied the code for the other menu items for my booking items and sub-items - but I just can't see why it doesn't work.

Can anybody have a look at the HTML in my page and assist?

The CSS I'm using is below:

/*All the navbar stuff*/
#container{width: 900px; margin: 0px auto;}
#content{padding: 10px 0px;}

#nav{height: 40px; background: #ccc;}
/*#navlist{margin: 0; padding: 0;}*/
/*#navlist li{display: inline; list-style: none; margin: 0; padding: 0;}*/
/*#navlist li a{float: left; display: block; background: #555; color: #fff; height: 19px; width: auto; padding: 10px; margin: 0 1px 0 0;

border-bottom: 1px solid #fff; text-decoration: none;}*/
/*#navlist li a:hover{background: #111; border-bottom: 1px solid #111; text-decoration: underline;}*/
/*#navlist li a:hover{text-decoration: underline;}*/
/*#navlist li a.active{background: #111; border-bottom: 1px solid #111;}*/

.columnnav{width: 200px; float: left; }
.columnnav ul, li{display: list-item; list-style: none; margin-left:-15px; }
.columnnav a{color: #fff; text-decoration: none;}
.columnnav a:hover{color: #fff; text-decoration: underline;}

.dropdown-b{position: absolute; top: 24px; left: 64px; width: 600px; height: auto; color: #fff; padding: 5px; margin:0; background: #46A3C8; display: none; z-index: 100;}
.dropdown-f{position: absolute; top: 24px; left: 149px; width: 500px; height: auto; color: #fff; padding: 5px; margin:0; background: #46A3C8; display: none; z-index: 100;}
.dropdown-e{position: absolute; top: 24px; left: 300px; width: 150px; height: auto; color: #fff; padding: 5px; margin:0; background: #46A3C8; display: none; z-index: 100;}
.dropdown-bo{position: absolute; top: 24px; left: 400px; width: 150px; height: auto; color: #fff; padding: 5px; margin:0; background: #46A3C8; display: none; z-index: 100;}
.dropdown-au{position: absolute; top: 24px; left: 548px; width: 150px; height: auto; color: #fff; padding: 5px; margin:0; background: #46A3C8; display: none; z-index: 100;}

SB65
09-06-2010, 06:35 PM
It looks like you haven't added the necessary code for the booking menu to your jdiv.js javascript.

coderchap
09-07-2010, 12:46 AM
Yes, that solved it, thanks so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum