Dropdown menus not working in Safari (iOS)

alloydog

alloydog

New Member
A while back, I was playing with an old iPod (iOS4.2.1), when I visited one of my websites, I found the dropdown menus were not working. I then asked a friend, who has god-knows-howmany Apple devices, and he said the menus did not work on any of them.

I use basic CSS and check it with the W3C validation site, so I think it is OK. I have also done several web searches with keywords like "safari ios css problem" but haven't found anything to help.

The stylesheet is here:
http://satans-kittens.website.org/style.css

The relevant part:

Code: 
/*----------------------------------*/
/* Navigation menus */
	.navigation {
		height:28px;
		margin:0 auto;
		padding:0;
		clear:both;
		text-align:center;
		background-color:#d4af37; /*gold*/
		border:0;
		border-top:solid 1px #e6be8a;
		text-shadow:1px 1px #af7817; /*dark goldenrod 4*/
		}

	.navigation ul {
		margin:0 auto;
		margin-left:250px;
		padding:0;
		}

	.navigation li {
		list-style:none;
		float:left;
		line-height:28px;
		margin:0;
		padding:0 6px;
		font-family:sans-serif;
		font-size:18px;
		font-weight:bold;
		color:#fbf8f6;
		}

	.navigation a {
		margin:0;
		color:#fbf8f6;
		text-decoration:none;
		}

	.navigation a:hover {
		margin:0;
		color:#ffd700;
		}

	/* Dropdown */
		.navigation ul ul {
			display:none;
			}

		#history {
			margin-left:-23px;
			}
		#community {
			margin-left:-10px;
			}

		.navigation ul li:hover ul {
			position:absolute;
			z-index:500;
			display:block;
			border:solid 1px #e6be8a;
			}

		.drop_down li {
			display:block;
			float:none;
			line-height:24px;
			padding:0 6px;
			background-color:#d4af37;
			font-family:sans-serif;
			font-size:12px;
			font-weight:bold;
			color:#fbf8f6;
			border-bottom:solid 1px #e6be8a;
			}

	#history_menu ul {
		margin-left:230px;
			}

	#history_menu li {
		font-size:12px;
			}

Any ideas what might be wrong?

Thanks
 
alloydog

alloydog

New Member
chrishirst said:
Running a 'CSS spell check' doesn't mean that it is correct, just that you have got the spellings right.
Click to expand...
What I meant by "basic" CSS, was that I'm not doing anything wild and wacky, which might not be supported by a lot of browsers - for example, the text shadowing for the title /is/ CSS3, but it doesn't matter if a browser does not yet support it, as the rest of the styling is CSS1.

The CSS for the drop-down menus is CSS1, so I would hope the majority of browsers support it.

By W3C validation, I was referring to the Markup Validation page - I know it does guarantee things /will/ work, but I use it to help avoid sloppy markup (missing end tags, stuff in the wrong place and so on...) I have added some bits, which are getting reported with errors, but the menu issue occurred before, when the pages were getting a clean pass.

I have checked the menus on Firefox, Opera and IE, and they worked. I was not able to personally check them on Safari, other than my really old iPod, which is when I found the problem.


chrishirst said:
Define
menus did not work on any of them
Click to expand...
Click to expand...
It means that the drop down menus did not, apparently, work with any of my friend's Apple devices, which I gather were all using Safari.
 
alloydog

alloydog

New Member
Thanks gents! I guess I was a bit sloppy there - I remember, now, reading ages ago that it was good practice to define all the link states seperately: link, visited, hover and active.

The menus now work on my phone (HTC /Android). I'll give ask my friend to "Apple test" the site on his collection.
 
You must log in or register to reply here.
Top