Hi all - hope you're well.
I really hope you can help me please.
I have the below script which works perfectly on normal computers, which is used on an internal Intranet site so I've had to take the relevant code to give you an idea.
Obviously the pictures etc aren't visible so it looks awful, but you'll hopefully get the general gist.
Myself and a few others are visiting it via iPad, but the menu doesn't seem to work (i.e. clicking on it doesn't reveal the items).
Is there anything I can do to fix that?
And before you wonder, no I'm not a paid web developer!!
Any help would be very much appreciated - I'm hoping it's a simple fix as the whole site is built around the below code so I'm hoping HTML wise I don't need to change anything!
Thanks in advance,
Dan
Code:
<html>
<head>
<style type="text/css">
#grad {
height: 33px;
width: 100%;
}
.time {
margin: 0px;
padding: 0px 15px 0px 0px;
float: right;
height: 33px;
line-height: 33px;
}
#grad ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#grad li {
margin: 0px;
padding: 0px;
display: block;
float: left;
}
#grad a {
float: left;
display: inline;
height: 33px;
line-height: 33px;
padding: 0px 20px;
font-weight: normal;
}
#grad a:hover {
text-decoration: none;
}
.nav , .nav * {
margin: 0px;
padding: 0px;
}
/* this is a z-index ie6 and ie7 bug fix */
div#grad {
/* position: relative!important; */
z-index: 50;
}
.nav {
line-height: 1.0;
float: left;
margin-bottom: 1.5em;
/* position: relative!important; */
}
/* IE6 needs this */
.nav ul {
padding: 0px;
}
.nav li {
float: left;
list-style: none;
position: relative;
}
* html .nav li {
position: static;
}
.nav li li a {
display: block;
padding: 0px;
text-decoration: none;
background-image: none;
float: none;
width: 170px;
}
div#grad li li a {
height: 30px;
line-height: 30px;
}
div#grad li:hover { background-position: 0 0; }
div#grad li:hover li , div#grad li.active:hover li {
background-image: none;
}
div#grad li:hover li a , div#grad li.active:hover li a {
background-image: none;
}
.nav li ul {
float: none;
top: -999em;
position: absolute;
width: 212px;
z-index: 5;
*-moz-opacity: 0.91;
opacity: 0.91;
}
/* Reset sub level opacity */
.nav li ul ul {
opacity: 1.0;
}
.nav li:hover ul {
left: -2px;
top: 33px;
}
.nav li:hover li ul , .nav li li:hover li ul , .nav li li li:hover li ul {
top: -999em;
}
.nav li li:hover ul , .nav li li li:hover ul , .nav li li li li:hover ul {
left: 210px;
top: 0px;
width: 210px;
}
.nav li li {
position: relative;
float: none;
width: 210px;
}
#grad {
background-color: #f0f0f0;
border-left: 1px solid #555;
border-right: 1px solid #555;
}
#grad li.active a {
background: url('/img/header-over.png') 0 0 repeat-x;
}
#grad li {
background: url('/img/header-sep.png') 100% 0 no-repeat;
}
div#grad li:hover a , div#grad li.active:hover a {
background: url('/img/header-over.png') 0 0 repeat-x;
}
div#grad .nav li li {
background: #2B2B2B;
border-bottom: 1px solid #4F4F4F;
border-right: 1px solid #4F4F4F;
border-left: 1px solid #4F4F4F;
}
div#grad li li a:link , div#grad li li a:visited , div#grad li li a:hover ,
div#grad li.active li a:link , div#grad li.active li a:visited , div#grad li.active li a:hover {
background: url('/img/submenu.png') 100% 50% repeat-y;
}
.nav li li:hover , #grad li:hover li:hover , #grad li.active li.active {
background-color: #212121;
}
#grad li:hover li a.daddy:link , #grad li:hover li a.daddy:visited {
background: url('/img/submenu-selected.png') 100% 50% no-repeat;
}
</style>
</head>
<body>
<div id="grad">
<ul class="nav">
<li><a href="/index.php" class="active">Home</a></li>
<li><a>Main 1</a><ul>
<li><a href="/index.php" class="daddy">Sub Menu</a><ul>
<li><a href="/index.php">Sub Item 1</a></li>
<li><a href="/index.php">Sub Item 2</a></li>
</ul></li>
<li><a href="/index.php">Main Item</a></li>
</ul></li>
<li><a>Main 2</a><ul>
<li><a href="/index.php" class="daddy">Sub Menu</a><ul>
<li><a href="/index.php">Sub Item 1</a></li>
<li><a href="/index.php">Sub Item 2</a></li>
</ul></li>
<li><a href="/index.php">Main Item</a></li>
</ul></li>
<li><a>Main 3</a><ul>
<li><a href="/index.php" class="daddy">Sub Menu</a><ul>
<li><a href="/index.php">Sub Item 1</a></li>
<li><a href="/index.php">Sub Item 2</a></li>
</ul></li>
<li><a href="/index.php">Main Item</a></li>
</ul></li>
<li><a href="/sitemap.php">Sitemap</a></li>
</ul>
</div>
</div>
</body>
</html>
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
