Div tag issues on different screen resolutions with <ul> <li>

Question

I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!

Here's: what it should look like

Here's: what it looks like after I've rewritten parts of the css of Mega Menu.

I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.

I believe this is the css needed pertaining to its placement

.megamenu_fixed {

width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}

and here's the code of it's position with the correct placement

#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }

Thanks in advance for any help, or pointing me in any right directions. :)

Answer 1

try using relative instead of absolute positioning. also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).

---

The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)

the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version

PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it

UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal

Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub