2 Replies Latest reply on Nov 26, 2011 7:45 AM by le chin

    Spry sub menu don't work on I phone

    le chin Level 1

      I created a website for a friend last year and everything worked fine up until now. My friend has a I phone now and was trying to view his website from the phone. The site comes up no problem on the phone but the sub menus don't work .  Here is my code from the index page. I was reading that the problem is with the way I phones use the click and hover that is the problem but I am not sure how to fix it.

       

      <style type="text/css">

      ul.nav {
      margin: 0;
      padding: 0;
      list-style-type: none;
      width: 135px;
      background-color: #f5face;
      }

      ul.nav a {
      display: block;
      color: #6f040d;/*CHANGE NORMAL STATE TEXT COLOR HERE*/
      font-weight: bold;
      text-decoration: none;
      border-bottom: 0px solid #000000;
      padding-top: 0em;
      padding-right: 1em;
      padding-bottom: 0em;
      padding-left: 1em;
      line-height: 30px; /*CONTROLS THE HIEGHT OF THE INDIVIDUAL LINKS*/
      height: 30px; /*YOU MUST ALWAYS GIVE THIS THE SAME VALUE AS THE LINKS*/
      }

      ul.nav .last a {
      border-bottom: 0;
      }

      ul.nav a:hover,
      ul.nav a:focus,
      ul.nav .selected a {
      color: #f5face;
      background-color: #6F040D;/*CHANGE THIS COLOR FOR ROLLOVER*/
      font-size: 14px;
      font-family: Verdana, Geneva, sans-serif;
      }
      ul.nav li {
      display: inline; /* :KLUDGE: Removes large gaps in IE/Win */
      }
      #Home .nav .Home a,
      #Menu .nav .Menu a ,
      #History .nav .History a,
      #Bikes .nav .Bikes a,
      #Cars .nav .Cars a,
      {
      background-position: right bottom;
      color: #fff;
      cursor: default;
      }

       


      .body{
      padding: 0;
      color: #000;
      background-color: #6f040d;
      background-position: center;
      text-align: center;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 14px;
      margin-top: 50;
      margin-right: 0;
      margin-bottom: 0;
      margin-left: 0;
      }

      #container{
          background-color: #f5face;
          width: 950px;
          padding: 0;
          text-align: left;
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 0;
          margin-left: auto;
      }

       

      #banner{
      width: 950px;
      height: 120px;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
      background-color: #f5face;
      background-image: url(Assets/indexpage/indexbanner.jpg);
      }

      #subContent{
      height: 300px;
      width: 135px;
      background-color: #f5face;
      float: left;
      }

      #primaryContent{
      background-color: #f5face;
      width: 800px;
      height: 600px;
      float: right;
      background-repeat: no-repeat;
      background-position: center top;
      background-image: url(Assets/indexpage/indexbg.jpg);
      }

      #footer{
      height: 50px;
      width: 950px;
      clear: both;
      background-color: #f5face;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 14px;
      font-style: normal;
      color: #000;
      margin: 0px;
      padding: 0px;
      text-align: right;
      }

      .copyRight{
      color: #6f040d; /*COPYRIGHT TEXT COLOR*/
      margin: 0px;
      padding-top: 20px;
      padding-right: 50px;
      padding-bottom: 0px;
      padding-left: 0px;
      text-align: right;
      }

      </style>
      </head>

      <body class="body">
      <!--
      This is the container DIV, it holds
      your entre page contents and also
      centers the page horizontally.
      -->
      <div id="container">
        <!--banner holds page logo-->
        <div id="banner"><h1>potato shak</h1></div>
        <!--The subContent-->
        <div id="subContent">
          <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="bikes.html">Bikes</a></li>
            <li><a href="cars.html">Cars</a></li>
          </ul>
        </div>
        <!--put all your main contents in here-->
        <div id="primaryContent"> </div>
       
       
        <!--put all copyright notice and other stuff in here-->
      <div id="footer">
      <p class="copyRight">Designed by Allen McCalmont</p>
      </div>

      </div>
      <!--End container-->
      </body>
      </html>