#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    CSS Menu - how can I get it to work on iPad?


    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>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    You have no doctype declaration, no <title> tag and you have an extra closing </div> tag.

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Thanks for your reply. Much appreciated.

    Sorry yes just disregard that. I tried to copy only the main part that was needed. A php script drives it normally, plus there's a huge CSS file. Just wanted to paste enough to show the workings of it as it stands now.

    Thanks,
    Dan

IMN logo majestic logo threadwatch logo seochat tools logo