3 replies [Last post]
Pagemaker
Pagemaker's picture
Offline
newbie
Edmonton Alberta Canada
Last seen: 4 years 1 week ago
Edmonton Alberta Canada
Timezone: GMT-7
Joined: 2015-11-08
Posts: 2
Points: 3

Good evening every one I am new here and not sure if this is the right place to post this question. I have a CSS Drop Down Menu on my website and it work perfectly on a desktop or laptop but I can not get it to work on mobile devices and if it does work it go's down the page making it look like crap. I was wondering if at all if some one would help me with this please. I am at a total loss and this website is a business for my wife. I can post the CSS style sheet I am currently using if that will help any. I really know nothing about this stuff.

Thank you

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Link?

Can you post a link to the page? CSS without the html markup is pretty much useless.

Or, you could post what's called a 'minimal test case'. Extract the menu's html markup and the applicable css and post that.

You should be aware that drop-down menus usually require a :hover state, which few small devices support. After all, what is hover if there's no pointing device (mouse, e.g.)? That's a big reason, if not the best reason, for fewer drop-down menus being used.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Pagemaker
Pagemaker's picture
Offline
newbie
Edmonton Alberta Canada
Last seen: 4 years 1 week ago
Edmonton Alberta Canada
Timezone: GMT-7
Joined: 2015-11-08
Posts: 2
Points: 3

My Menu

 <table width="43%" align="center" border="0"><tr><td valign="center">
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'>HOME</a></li>
   <li><a href='aboutus.html'>About US</a></li>
   <li class='has-sub'><a href='#'>Products</a>
      <ul>
         <li class='has-sub'><a href='#'>Creams & Lotions</a>
            <ul>
               <li><a href='bodybutters.html'>Body Butters</a></li>
			   <li><a href='cleansingbalms.html'>Face Cleansing Balms</a></li>
			   <li><a href='facemasks.html'>Face Masks</a></li>
               <li><a href='footcream.html'>Foot Creams</a></li>
			   <li><a href='hblotions.html'>Hand & Body Lotion</a></li>
			   <li><a href='moisturizingcreams.html'>Moisturizing Creams</a></li>
               <li><a href='scrubs.html'>Sugar Scrubs</a></li>
			   <li><a href='eyecreams.html'>Under Eye Creams</a></li>
               </ul>
         </li>
         <li class='has-sub'><a href='#'>Lip Products</a>
            <ul>
               <li><a href='lipbalms.html'>Lip Balms</a></li>
			   <li><a href='lipgloss.html'>Lip Gloss</a></li>
               <li><a href='lipstick.html'>Lip Sticks</a></li>
            </ul>
         </li>
		   <li class='has-sub'><a href='#'>Mineral Cosmetics</a>
            <ul>
               <li><a href='eyeshadows.html'>Eye Shadows</a></li>
               <li><a href='foundations.html'>Foundations</a></li>
            </ul>
			<li><a href='massageoils.html'>Massage Oils</a>
            </li>
		 <li><a href='packages.html'>Special Packages</a>
            </li>
			<li><a href='gift.html'>Gift Certificates</a>
            </li>
			<li><a href='members.html'>Become a Member</a>
            </li>
      </ul>
   </li>
   <li><a href="http://dianaleecosmetics.blogspot.ca/" target="_blank">Blog</a></li>
   <li><a href='shipping.html'>Shipping</a></li>
   <li><a href='contactus.php'>Contact</a></li>
</ul>
</div>
</td></tr></table>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Comments

First, I think the small screen renderings are mostly great. They are legible and quite usable. You cannot expect the small screens to look the same or have the same layout as a larger screen. Which is more important? Your designer ego or the customers' ability to actually use the site?

I noticed that at some point between 600 and 800px widths, the menu disappears. Also, the menu doesn't appear at all in small screens if javascript is disabled. Javascript sucks batteries dry, so lots of people kill it. Be sure your site works before you add bells and whistles; that includes javascript and css. JS and css are embellishments and are there to enhance the visitor experience, not replace functionality.

For the H1 image do this:

h1.logo img {
    width: 95%;
    max-width: 568px;}
This will keep the logo image from overflowing horizontally, a Bad Thing.

The 'center' tag has been obsolete since 1997. In your use case in the logo, simply do this:

h1 {
    text-align: center;}

Don't forget to use the alt property to replicate the image's text in case the image is not loaded.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.