Cell Phone Display on Hover Problem

[MBM]

I am using a mega menu for navigation. Only one of the links is active, the rest drop down a section of text. I have made a stylesheet for mobile (cell phone) displays and aligned everything and tested on my phone (Motorola Atrix 4G). The problem is obviously it’s not possible to mouse over a link on a mobile phone so when I click on the eCommerce element it opens the link but doesn’t dropdown the text. Although I could put a link in the drop down instead I would like to know if there’s a workaround for this problem. The menu is here :

http://mbmitservices.co.uk

I’m not sure what code is relevant so have pasted everything and can someone please explain how this stupid markdown works so I can list code without adding 4 spaces to every line :

body, ul, li {
font-size:20px;
font-family: ‘Ubuntu Condensed’, sans-serif;
text-align:left;
}

#menu {
list-style:none;
width:278px;
margin:-90px auto 0px auto;
height:30px;
padding:0px 20px 0px 20px;

/* Background color and gradients */

background: #333333;
background: -moz-linear-gradient(top, #413F5B, #282737);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#413F5B), to(#282737));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
border:none;
margin-left:10px;
}

#menu li:hover {}

#menu li a {
font-family: ‘PT Sans Narrow’, sans-serif;
font-size:14px;
color: #ffffff;
text-decoration:none;

}

#menu li:hover a {color:#ffffff;}

.element1,
.element2,
.element3,
.element4,
.element5,
.element6 {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:0px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
color:#ffffff;
margin-top:0px;

/* Gradient background */
background:#014464;

/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.element1{width: 180px;padding:10px 20px 10px 20px;z-index:1000;margin- left:-80px;}
.element2{width: 180px;padding:10px 20px 10px 20px;z-index:1000;margin-left:-60px;}
.element3{width: 180px;padding:10px 20px 10px 20px;z-index:1000;margin-left:-40px;}
.element4{width: 180px;padding:10px 20px 10px 20px;z-index:1000;margin-left:-120px;}
.element5{width: 180px;padding:10px 20px 10px 20px;z-index:1000;margin-left:0px;}

#menu li:hover .element1,
#menu li:hover .element2,
#menu li:hover .element3,
#menu li:hover .element4,
#menu li:hover .element5,
#menu li:hover .element6 {
left:-1px;
top:auto;
}

.tab_1,
.tab_2,
.tab_3,
.tab_4,
.tab_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.tab_1 {width:180px;}
.tab_2 {width:180px;}
.tab_3 {width:180px;}
.tab_4 {width:180px;}
.tab_5 {width:180px;}

[JohnMotylJr]

Ill give this a look here in a sec but i am wondering one thing. When my browser is re-sized to ohhh lets say 700px (Chrome), is your site suppose to look like that?

And by briefly glancing at the code are you using css to cause your dropdown? Have you looked into a Javascript or jQuery option since mobile will support that?

[AmruthPillai]

On a totally unrelated note, when I resize my browser to 1024×768 or lower, the stylesheet linking is disabled. If you are trying to accomplish Responsive Design for Mobile Devices, I suggest you keep the existing style sheet linked always to the website and the media-queries rules as an addition to the original. That way, you won’t have to edit so many elements and will have the basic look of the website intact.

Coming to your problem, this is highly debated and the answer still says the same. NO, mobile devices don’t, or to better put it, CAN’T support hover actions. Especially with touch screen devices, I don’t see how that’s even possible. For those type of devices, instead of a hover sequence, you can make the content appear when touched upon, or clicked upon in this case.

[MBM]

Yes that is how the website looks on 700px or 768px for the simple reason I have not edited the stylesheet for tablet displays!

[Author]

Posts