Home/ Questions/Q 7430297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:06:59+00:00

I’m working on a website, and I’ve encountered a problem for which I cannot

  • 0

I’m working on a website, and I’ve encountered a problem for which I cannot find any kind of solution online, so I’d appreciate your help.

I’ve designed a drop-down menu, and this is the problem: if the page is zoomed in, it breaks into 2 lines (not desired as it’s a drop-down menu!), but if I set a minimum-width for the menu, as the position is set to absolute, I cannot scroll to the right and the menu just goes out of the screen. It doesn’t work neither if I set a minimum-width for the body tag, as it allows me to scroll the body but the menu stays out! It’s frustrating

The position must be kept to absolute, otherwise I’d need a whole method to keep it on top and would appreciate your help, so I’m looking for a solution that let’s me scroll to the right if the screen is really zoomed in, as in smartphones.

Here’s the menu code (not all of it ofc, as it’s too long, but the main parts. To see more, ask for it or visit the page and see the source code).

Website: http://newfutureuniversity.org/

HTML:

...
<body>
    <div id="container">
        <div class="menu" >
            <ul>
                <li><a href="http://newfutureuniversity.org/">New Future</a></li>
                <li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a>
                <ul class="bottom">
                ...
                </ul>
                </li>
...

CSS:

body                /* Changes the style for the whole body */
    {
    position:absolute;
    margin:0px;         /* Avoids margin in the whole page */
    padding:0px;
    border:0px;
    background-color: #EEEEEE;  /* Default background color, light grey */
    height:100%;            /* Vertically complete */
    width:100%;
    min-width:400px;
    min-height: 100%;
    color: #333;            /* Letters color */
    }

#container          /* The container has the header, main and footer inside */
    {
    position:relative;
    margin:0px;
    padding:0px;
    min-height: 100%;       /* Avoids the footer to go up */
    height: auto !important;
    height: 100%;
    margin: 0px auto -51px;
    }
.menu
    {
    position: fixed;
    top:0px;
    left:0px;
    opacity:0.3;
    filter:alpha(opacity=30);   /* For IE8 and earlier */
    width:100%;
    min-width:400px;
    border:none;
    border-bottom:1px solid gray;
    margin:0px;
    padding:0px;
    font-size:18px;
    z-index:3;
    }

.menu ul
    {
    background:#DDD;
    height:26px;
    list-style:none;
    margin:0px;
    padding:0px;
    z-index:3;
    }
    .menu li{
        width:24.5%;
        min-width:93px;
        float:left;
        padding:0px;
        margin: 2px 0px 2px 0.5%;
        }
...

EDIT:
You need to unmaximize and to zoom to see the problem in a desktop browser.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am not especially sure what you mean by breaking into two lines. I have looked at your site on Firefox, Chrome, IE, Opera and on my iPhone and was unable to reproduce your problem. The menu simply overflowed off the screen and out of view for the final item “Get In”. I fear you may however have a design problem. I would not encourage you to build ‘one-site-for-all’ but target your audience.

    Your desired solution is relatively impossible to do with your menu design. You are working with fixed/absolute position and positioning it relative to the window/screen view. When you zoom your screen ‘floats ‘ around on the webpage, but the position of absolute positioned objects are relative to the screen(not the page) and will not move.

    You ‘could solve’ this with js script that would allow modifications in the positioning based on scale, but I advise against it. I had tried to solve a similar problem and this quickly became the device specific debugging is a nightmare worst then the browser nightmare we struggle with today.

    As for solutions, I would strongly recommend you look into a few different frameworks. First being an CSS solution, lessframework. It gives you a simple framework to use for multi-device compatible layouts without digging into js. On the other hand if JavaScript isn’t an issue checkout jQuery Mobile. You can produce drop-down menus with nice transition effect easily that are very similar to what you were creating.

    • 0