I am going maid searching, trying, I am desperate.
I have a pure css hover menu, (Peterneds whatever hover)
However I want it to work in touchscreens (smartphones, tablets etc), the problem is I dont have any so is very dificult to test,
I have been trying to add an a link # to made the li clickable however dont manage, and dont know if its the best way or not. Read that javascript should be avoided as some smartphones needs javamachine and that takes much battery, not sure on that.
Or maybe its better to serve a diferent menu to touchscreens.
Well this is the relevant css:
Code: Select all
#menu p {display: block; border: 1px solid; border-color: #ccc #888 #555 #bbb; margin:0; padding:2px 3px; color:#000099;
text-align:center; background:url("../images/background5.gif"); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;
font-weight:bold;}
#menu ul ul .level2{ display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099;
background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold;
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:250px;}
#menu a{display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; background:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px;
padding-bottom:3px; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;}
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;}
And this is a piece of the html:
<ul>
<li><p>About Us <img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li class="level4"><a href="guestbook_2011.htm">Holiday makers comments and tips</a></li>
<li class="level4"><a href="about_us.htm">About Us</a></li>
<li class="level4"><a href="example.htm">maintenance company</a></li>
</ul>
</li>
</ul>
<ul>
<li><p>Properties <img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li class="level2">Town Center <img src="new_arrow.gif" alt="Arrow right" border="0">
<ul>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a> </li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
</ul>
</li>
<li class="level2">example <img src="new_arrow.gif" alt="Arrow right" border="0">
<ul>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a> </li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
</ul>
