CSS navighation issue

**Struggling** · Jan 7, 2013 04:41

I have the following navigation which works perfectly as far as I know on most browsers, but doesn't quite work properly on the ipad.

I have it setup so that if you click on products it takes you to the products page but on the ipad if you click on products it goes to the products page before you get chance to see the dropdown options.

I know on this website betrescue.com if you click on the navigation it brings the dropdown section up and then you have to click the link again to go to the page.

Is it possible to change my current navigation to fix this, so it works as it currently does on teh internet but also works correctly on the ipad??

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
/**************/
/* navigation */
/**************/

ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 1;
}
ul#nav li {
	position: relative;
	float: left;
	width:79px;
}
#nav li ul {
	position: absolute;
	left: 0; 
	top: auto;
	margin-left:-999em;
}
#nav li  li{width:160px;}
#nav li ul ul{
	position: absolute;
	left:100%;
	top: -.1em;
	margin-left:-999em;
}

/* Styles for Menu Items */
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 likes a background here */
	padding: 5px;
	border: 1px solid #fff;
	zoom:1.0;
	font: 11px Arial, Helvetica, sans-serif;
}

/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
	color: #EB6E08;
	background-color: fff;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
	color: #EB6E08;
	background: #FFF;
}
#nav li ul li a {
	padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
	margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
	margin-left:0;
}





/**************/
/* menunavigation */
/**************/

ul#menunav, ul#menunav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 1;
	height:30px;

}
ul#menunav li {
	position: relative;
	float: left;
	width:186px;
}
#menunav li ul {
	position: absolute;
	left: 0; 
	top: auto;
	margin-left:-999em;
}
#menunav li  li{width:186px;}
#menunav li ul ul{
	position: absolute;
	left:100%;
	top: -.1em;
	margin-left:-999em;
}

/* Styles for Menu Items */
ul#menunav li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 likes a background here */
	padding: 0px 5px;
	border: 1px solid #fff;
	zoom:1.0;
	font: 11px Arial, Helvetica, sans-serif;
}

/* this sets all hovered lists to red */
#menunav li:hover a, #menunav li.over a, #menunav li:hover li:hover a, #menunav li.over li.over a, #menunav li:hover li:hover li:hover a, #menunav li.over li.over li.over a, #menunav li:hover li a:hover, #menunav li.over li a:hover, #menunav li:hover li:hover li:hover a:hover, #menunav li.over li li a:hover, #menunav li:hover li:hover li:hover li:hover a:hover, #menunav li.over li.over li.over li.over a:hover {
	color: #EB6E08;
	background-color: fff;
}
/* set dropdown to default */
#menunav li:hover li a, #menunav li.over li a, #menunav li:hover li:hover li a, #menunav li.over li.over li a, #menunav li:hover li:hover li:hover li a, #menunav li.over li.over li.over li a {
	color: #EB6E08;
	background: #FFF;
}
#menunav li ul li a {
	padding: 0px 5px;
} /* Sub Menu Styles */
ul#menunav li:hover ul ul, ul#menunav li:hover ul ul ul, ul#menunav li.over ul ul, ul#menunav li.over ul ul ul {
	margin-left:-999em;
}
ul#menunav li:hover ul, ul#menunav li li:hover ul, ul#menunav li li li:hover ul,u#menunavl li li li li:hover ul, ul#menunav li.over ul, ul#menunav li li.over ul, ul#menunav li li li.over ul {
	margin-left:0;
}

.menu-img {width:186px; height:30px;}

</style>
</head>

<body>
<ul id="nav">
 <li><a href="../">Home</a></li> 
	
		<li><a href="../aboutus.php">About Us</a></li> 
		<li><a href="../services.php">Services</a></li> 
		<li><a href="../industries.php">Industries</a>
		<ul>
		<li><a href="../steel-industry.php">Industry 1</a></li>
		</ul>
		</li>			
      <li><a href="../products.php">Products</a> 
        	<ul>
			<li><a href="../gearedmotors.php">Products 1</a></li>

			<li><a href="../flexiblecouplings.php">Products 2</a></li>
				
			<li><a href="../wormgear.php">Products 3</a></li>
			</ul>
			</li>
			<li><a href="../news.php">News</a></li> 
		<li><a href="../downloads.php">Downloads</a> 
        <ul>
          	<li><a href="../brochures.php">Downloads 1</a></li>
		</ul>
		</li> 		
      <li><a href="../contactus.php">Contact Us</a>
	          <ul>
          	<li><a href="../locations.php">Locations</a></li> 
		</ul>
		</li>
</ul>
</li>
</ul>
</body>
</html>

**Paul O'B** · Jan 7, 2013 16:56

Hi,

The usual fix is just to have a dummy link on the top level.

e.g.

Code:

<li><a  href="#">Industries</a>

The dropdown will now show when you tap the link on the ipad. If you need it as a real link then you will probably need to script it and detect the ipad/iphone etc. Or if the top level link was just a fallback for when js was disabled you could instead remove the destination through js and leave the unscripted version in working order.

**PicnicTutorials** · Jan 7, 2013 18:39

If the menu is not dead top it will launch to the top if the top linked it clicked. You can put javascript:; in the href to prevent that.

User Tag List

Thread: CSS navighation issue

Thread Tools

Display

CSS navighation issue

Bookmarks

Bookmarks

Posting Permissions