PDA

View Full Version : css drop down problem not showing drop downs righ



char
Feb 4th, 2010, 01:08 PM
hi there i have found an simple css drop down menu code here


<ul id="menu">
<li><a href="http://www.mysite.com/">HOME</a></li>
<li><a href="http://www.mysite.com/cat.html">HOTELS</a>
<ul>
<li><a href="http://www.mysite.com/cat/east-anglia.html">in East Anglia</a></li>
<li><a href="http://www.mysite.com/cat/midlands.html">in the Midlands</a></li>
<li><a href="http://www.mysite.com/cat/north-mid-wales.htmll">in North / Mid Wales</a></li>
<li><a href="http://www.mysite.com/cat/north-east.html">in North East</a></li>
<li><a href="http://www.www.mysite.com/cat/north-west.html">in North West</a></li>
<li><a href="http://www.www.mysite.com/cat/northern-ireland.html">in Northern Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/republic-of-ireland.html">in Republic of Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/scotland.html">in Scotland</a></li>
<li><a href="http://www.www.mysite.com/cat/south-east.html">in South East</a></li>
<li><a href="http://www.www.mysite.com/cat/south-wales.html">in South Wales</a></li>
<li><a href="http://www.www.mysite.com/cat/south-west.html">in South West</a></li>
</ul>
</li>
<li><a href="">BED & BREAKFASTS</a>
<ul>
<li><a href="">in East Anglia</a></li>
<li><a href="">in the Midlands</a></li>
<li><a href="">in North / Mid Wales</a></li>
<li><a href="">in North East</a></li>
<li><a href="">in North West</a></li>
<li><a href="">in Northern Ireland</a></li>
<li><a href="">in Republic of Ireland</a></li>
<li><a href="">in Scotland</a></li>
<li><a href="">in South East</a></li>
</ul>
</li>
<li><a href="">iNNS & PUBS</a>
<ul>
<li><a href="http://www.mysite.com/cat/east-anglia.html">East Anglia</a></li>
<li><a href="http://www.mysite.com/cat/midlands.html">in the Midlands</a></li>
<li><a href="http://www.mysite.com/cat/north-mid-wales.htmll">in North / Mid Wales</a></li>
<li><a href="http://www.mysite.com/cat/north-east.html">in North East</a></li>
<li><a href="http://www.www.mysite.com/cat/north-west.html">in North West</a></li>
<li><a href="http://www.www.mysite.com/cat/northern-ireland.html">in Northern Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/republic-of-ireland.html">in Republic of Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/scotland.html">in Scotland</a></li>
<li><a href="http://www.www.mysite.com/cat/south-east.html">in South East</a></li>
<li><a href="http://www.www.mysite.com/cat/south-wales.html">in South Wales</a></li>
<li><a href="http://www.www.mysite.com/cat/south-west.html">in South West</a></li>
</ul>
<li><a href="">WEEKEND EVENTS & TOURS</a>
<ul>
<li><a href="http://www.mysite.com/cat/keyword-night-events.html">Night Events</a></li>
<li><a href="http://www.mysite.com/cat/keyword-bus-tours.html">Bus Tours</a></li>
<li><a href="http://www.mysite.com/cat/keyword-weekends.html">Weekend Breaks</a></li>
<li><a href="http://www.mysite.com/cat/ghost-hunts.html">Ghost Hunts</a></li>
<li><a href="http://www.mysite.com/cat/keyword-house-castle.html">House/Castle Tours</a></li>
<li><a href="http://www.mysite.com/cat/keyword-walks.html">keyword Walks</a></li>
</ul>
<li><a href="">PLACES TO ViSIT</a>
<ul>
<li><a href="http://www.mysite.com/cat/keyword-attractions.html">Attractions</a></li>
<li><a href="http://www.mysite.com/cat/keyword-castles.html">Castles</a></li>
<li><a href="http://www.mysite.com/cat/keyword-houses.html">Houses</a></li>
<li><a href="http://www.mysite.com/cat/keyword-locations.html">Locations</a></li>
<li><a href="http://www.mysite.com/cat/keyword-churches-cemeteries.html">Churches/Cemeteries</a></li>
<li><a href="http://www.mysite.com/cat/keyword-mansions.html">Mansions</a></li>
<li><a href="http://www.mysite.com/cat/keyword-museums-libraries.html">Museums/Libraries</a></li>
</ul>
</div>

css here

ul {
font-family: Arial, Verdana;
font-size: 10px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color:#F00;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background:#000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background:#000; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background:#000; }
li:hover li a:hover { background: #95A9B1; }

but when i go to add it to my site hauntedrooms.co.uk it adds the drop down menu but dose not show them under the right section off the site maybe some other css is stoping the dropdown menu from working in the styles.css that is making it not work. eg they dont put the drop down menus dont show under the right places

mbaker
Feb 4th, 2010, 03:41 PM
Char,

Your css defines rules for #menu ul etc. However your html has <ul id="menu">

These don't match.

You either need to change your css to ul#menu etc. or your html to <div id="menu"><ul>. Then your css and html will match.

char
Feb 4th, 2010, 04:22 PM
thank you so much mbaker its works now

one other question how do i close the exta gap i get on the site now with in the drop down menus as it moves on to a new one

you are an top guy :thumbsup: it would have taken me hours 2 find that out

char
Feb 4th, 2010, 05:16 PM
one other thing what is this drop down menu not working in ie anyone got any ideas

even my mobile phone is showing the drop down lol

Avril
Feb 5th, 2010, 03:46 PM
Probably a problem with the ul and li tag sequence. Don't have IE, but try this for size:


<div>
<ul id="menu">
<li><a href="http://www.mysite.com/">HOME</a></li>
<li><a href="http://www.mysite.com/cat.html">HOTELS</a>
<ul>
<li><a href="http://www.mysite.com/cat/east-anglia.html">in East Anglia</a></li>
<li><a href="http://www.mysite.com/cat/midlands.html">in the Midlands</a></li>
<li><a href="http://www.mysite.com/cat/north-mid-wales.htmll">in North / Mid Wales</a></li>
<li><a href="http://www.mysite.com/cat/north-east.html">in North East</a></li>
<li><a href="http://www.www.mysite.com/cat/north-west.html">in North West</a></li>
<li><a href="http://www.www.mysite.com/cat/northern-ireland.html">in Northern Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/republic-of-ireland.html">in Republic of Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/scotland.html">in Scotland</a></li>
<li><a href="http://www.www.mysite.com/cat/south-east.html">in South East</a></li>
<li><a href="http://www.www.mysite.com/cat/south-wales.html">in South Wales</a></li>
<li><a href="http://www.www.mysite.com/cat/south-west.html">in South West</a></li>
</ul>

<li><a href="">BED & BREAKFASTS</a>
<ul>
<li><a href="">in East Anglia</a></li>
<li><a href="">in the Midlands</a></li>
<li><a href="">in North / Mid Wales</a></li>
<li><a href="">in North East</a></li>
<li><a href="">in North West</a></li>
<li><a href="">in Northern Ireland</a>
<li><a href="">in Republic of Ireland</a></li>
<li><a href="">in Scotland</a></li>
<li><a href="">in South East</a></li>
</ul>

<li><a href="">iNNS & PUBS</a>
<ul>
<li><a href="http://www.mysite.com/cat/east-anglia.html">East Anglia</a></li>
<li><a href="http://www.mysite.com/cat/midlands.html">in the Midlands</a></li>
<li><a href="http://www.mysite.com/cat/north-mid-wales.htmll">in North / Mid Wales</a></li>
<li><a href="http://www.mysite.com/cat/north-east.html">in North East</a></li>
<li><a href="http://www.www.mysite.com/cat/north-west.html">in North West</a></li>
<li><a href="http://www.www.mysite.com/cat/northern-ireland.html">in Northern Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/republic-of-ireland.html">in Republic of Ireland</a></li>
<li><a href="http://www.www.mysite.com/cat/scotland.html">in Scotland</a></li>
<li><a href="http://www.www.mysite.com/cat/south-east.html">in South East</a></li>
<li><a href="http://www.www.mysite.com/cat/south-wales.html">in South Wales</a></li>
<li><a href="http://www.www.mysite.com/cat/south-west.html">in South West</a></li>
</ul>

<li><a href="">WEEKEND EVENTS & TOURS</a>
<ul>
<li><a href="http://www.mysite.com/cat/keyword-night-events.html">Night Events</a></li>
<li><a href="http://www.mysite.com/cat/keyword-bus-tours.html">Bus Tours</a></li>
<li><a href="http://www.mysite.com/cat/keyword-weekends.html">Weekend Breaks</a></li>
<li><a href="http://www.mysite.com/cat/ghost-hunts.html">Ghost Hunts</a></li>
<li><a href="http://www.mysite.com/cat/keyword-house-castle.html">House/Castle Tours</a></li>
<li><a href="http://www.mysite.com/cat/keyword-walks.html">keyword Walks</a></li>
</ul>
<li><a href="">PLACES TO ViSIT</a>
<ul>
<li><a href="http://www.mysite.com/cat/keyword-attractions.html">Attractions</a></li>
<li><a href="http://www.mysite.com/cat/keyword-castles.html">Castles</a></li>
<li><a href="http://www.mysite.com/cat/keyword-houses.html">Houses</a></li>
<li><a href="http://www.mysite.com/cat/keyword-locations.html">Locations</a></li>
<li><a href="http://www.mysite.com/cat/keyword-churches-cemeteries.html">Churches/Cemeteries</a></li>
<li><a href="http://www.mysite.com/cat/keyword-mansions.html">Mansions</a></li>
<li><a href="http://www.mysite.com/cat/keyword-museums-libraries.html">Museums/Libraries</a></li>
</ul>

</li>
</ul>

</div>

char
Feb 17th, 2010, 01:19 PM
this still dont seem to work in ie i have mange to get it working with ie ends up closing down the drop down menu when you start to hover over it. and for some reason the drop down only seems to work in ie7 mode not sure why

link here hauntedrooms.co.uk


thank you again for your help guys

abduraooft
Feb 17th, 2010, 01:28 PM
#menu li:hover ul {
display: block;
position: absolute;
}IE6 doesn't recognise :hover on any elements other than anchor. So, you'd need to add a javascript fix for IE6. See http://htmldog.com/articles/suckerfish/dropdowns/ or www.xs4all.nl/~peterned/csshover.html

char
Feb 17th, 2010, 01:39 PM
the problem is with ie7 and ie8 is the drop down works but it closes when you go down the drop down menu

thank you again for your help guys