Hi web designers! I just want to know what is the problem with my css since its perfectly working in desktop and laptop, while its having a problem in tablets and mobile devices. This is my code:

CSS:

#header{

    width: 935px;
    margin-left: auto;
    margin-right:auto;
    padding:20px;
    background-color:#FFF;
    margin-top:-9px;
}

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;width:139px;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
    *display:inline;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#5289e5;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
    float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
    text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#000000;border-color:#C0C0C0;border-style:solid;color:#ffffff;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    background-color:#424542;background-image:none;color:#00aaff;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li.topfirst>a{
    border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
    border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}

HTML:

<div id="header">
<center>
  <img style="margin-left:-100px; margin-top:-12px" src="images/header.gif" />
</center>
<a href="http://positiveqa.com:2095/horde/index.php"><img style="float:right; margin-top: -20px; margin-right:15px" src="images/email.png" border="0"/></a>
</div>
<center>
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="index.php" style="height:18px;line-height:18px;"><center>Home</center></a></li>
    <li class="topmenu"><a href="findjobs.php" style="height:18px;line-height:18px;"><center>Find Jobs</center></a></li>
    <li class="topmenu"><a href="addcv.php" style="height:18px;line-height:18px;"><center>Post CV</center></a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span><center>Employers</center></span></a>
    <ul>
        <li><a href="creatjobform.php">Post Job</a></li>
        <li><a href="applicants.php">Search CVs</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span><center>Domestic Workers</center></span></a>
    <ul>
<li><a href="domestichelpers/housemaids.php">Housemaid</a></li>
        <li><a href="domestichelpers/houseboy.php">House Boy</a></li>
        <li><a href="domestichelpers/driver.php">Driver</a></li>
        <li><a href="domestichelpers/chef.php">Chef</a></li>
        <li><a href="domestichelpers/others.php">Others</a></li>
    </ul></li>
    <li class="topmenu"><a href="contactusform.php" style="height:18px;line-height:18px;"><center>Contact Us</center></a></li>
    <li class="toplast"><a href="aboutus.php" style="height:18px;line-height:18px;"><center>About Us</center></a></li>
</ul>
</center>

What problem are you having with the mobile devices?

The last item in my Menu bar is showing at the bottom of the first item

If you are setting a width on the list items and you run out of space, it will wrap to the next line, in this case, under the first item.

Am just wondering why only in mobile device and tablets, in pc's its okay. Anyway I adjusted the width and it went okay :) Thanks JorgeM!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.