I can't put the menu horizontally anything i would do. What i am doing wrong?
I suppose that the problem is from inline option, but i am not sure.
If anyone can correct my code i would appreciate very much. Thank you.
HTML code
<nav>
<ul>
<li class = "current-item"> Home </li>
<li> Profile </li>
<li> Contact </li>
</ul>
</nav>
CSS code
nav{
position:absolute;
margin-top: 288px;
margin-left: 0px;
width: 25px;
height:25px;
z-index: 2;
}
nav > ul > li {
font-size:20px;
color:white;
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
z-index: 2;
}
nav > ul > li> a {
text-decoration:none;
color:#000000;
transition:all linear 0.15s;
}
nav > ul >.current-item > a{
background-color:rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius:10px;
border:none;
cursor: pointer;
width: 50px;
height: 28px;
z-index:2;
text-decoration:none;
}
nav> ul > li:hover> a{
background-color:rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius:10px;
border:none;
cursor: pointer;
width: 50px;
height: 28px;
z-index:2;
}
Remove the width from nav.
nav{
position:absolute;
margin-top: 288px;
margin-left: 0px;
height:25px;
z-index: 2;
}
Related
I'm working on a navbar with a megamenu.
To manage the megamenu I'm using the bootstrap-dropmenu library (GitHub link) based on Bootstrap 3.
Everything is working well, but the megamenu content is not aligned with the div container.
Here a screenshot to explain better the problem.
What I'd like is to have the first element of the megamenu aligned with "LOGO".
Here HTML the code:
<nav class="navbar top-menu">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand logo" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse navigation-menu">
<ul class="nav navbar-nav">
<li>
home
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" >tab 1</a>
<div class="dropdown-container">
<ul class="dropdown-menu">
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
<li>elem 4</li>
</ul>
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And the CSS:
.top-menu{
background: green;
}
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
}
.logo:hover, .logo:visited, .logo:link, .logo:active {
color: #FFFFFF;
text-decoration: none;
}
.navigation-menu{
width:auto;
float:left;
}
.navigation-menu li{
font-size:13px;
font-size:1.3rem;
display:block;
font-weight:700;
line-height:16px;
text-align:left;
text-transform:uppercase;
margin:0 10px;
}
.navigation-menu li a{
color: #FFFFFF;
display:block;
padding:20px 20px;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
}
.dropdown-megamenu li a{
font-size:13px;
font-size:1.3rem;
color: #000080;
display:inline;
padding:0;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
text-transform:uppercase;
font-weight:700;
line-height:16px;
margin:0 10px;
}
.dropdown-megamenu li a:hover{
font-size:13px;
font-size:1.3rem;
color: #e5ae07;
display:inline;
padding:0;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
text-transform:uppercase;
font-weight:700;
line-height:16px;
margin:0 10px;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
background-color: #b3b3ff;
color:#000080;
text-decoration: none;
display:block;
height: 100%;
margin-top: 0;
margin-bottom: 0;
}
ul.nav a:hover {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid #b3b3ff;
}
.nav > .dropdown-megamenu {
position: static;
}
.nav .open>a {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid transparent;
}
.nav .open>a:hover {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid #b3b3ff;
}
.dropdown-megamenu > .dropdown-container {
background-color: #e6e6ff;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
text-align: left;
}
.dropdown-menu>li {
display: inline;
padding: 10px;
}
I've have prepared a JSFiddle with the real case.
Can anyone explain to me how to achieve my goal?
You are using a div with class container which was actually causing issue.Because by default it was adding margin and paddings to your navbar.I have removed that div. Plus did some addition to your logo margin-left and dropdown-container:
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
/* addition to your code */
margin-left: 25px;
}
.dropdown-megamenu > .dropdown-container {
background-color: #e6e6ff;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
text-align: left;
/* Addition to your code*/
padding: 0px 13px;
}
You can check the JSFiddle. It is also responsive.
I'm doing my project for web development and my friend was assigned to do the nav bar. But after i completed my website and pasted his nav bar codes into my codes. It clashed with my bootstrap and thus not displaying correctly. I tried searching for solutions like pasting the link ref after the bootstrap but still up to no avail.
I'll put the CSS code and HTML code here. I'm guessing the classes clashed?
<nav class="navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="dropdown">
EVENTS
<div id="specificdays" class="dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="dropdown">
PROJECTS
<div class="dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="logo"></li>
</ul>
</nav>
/CSS/
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav{
position:sticky;
top:0;
z-index:1;
}
li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
li a, .dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
li .dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.dropdown:hover .dropdown-content {
display:block;
}
.navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
Just rename your class with any unique name which will not be in Bootstrap.For that you can add your website name with class or anything
<nav class="your-theme-navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="your-theme-dropdown">
EVENTS
<div id="specificdays" class="your-theme-dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="your-theme-dropdown">
PROJECTS
<div class="your-theme-dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="your-theme-logo"></li>
</ul>
and change these classes in CSS also
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav{
position:sticky;
top:0;
z-index:1;
}
li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
li a, .dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
li .your-theme-dropdown {
display: inline-block;
}
.your-theme-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.your-theme-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.your-theme-dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.your-theme-dropdown:hover .your-theme-dropdown-content {
display:block;
}
.your-theme-navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.your-theme-logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
Change the name of your defined classes, for example .navbar class in your css file is already included in css file of bootstrap.
If you want use some css of bootstrap and some custom css then just write new class nearby navbar class and target all navbar css with that new class
example
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav.custom-navbar{
position:sticky;
top:0;
z-index:1;
}
.custom-navbar ul li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
.custom-navbar ul li a,.custom-navbar ul li a.dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
.custom-navbar ul li .dropdown {
display: inline-block;
}
.custom-navbar ul li .dropdown .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.custom-navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.custom-navbar ul li .dropdown .dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.custom-navbar ul li .dropdown:hover .dropdown-content {
display:block;
}
.custom-navbar.navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
<nav class="navbar custom-navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="dropdown">
EVENTS
<div id="specificdays" class="dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="dropdown">
PROJECTS
<div class="dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="logo"></li>
</ul>
</nav>
Currently I have a header and above it I have my navbar. On my editor it is centered but when I stretch the page or view it in a different format it won't appear to be on top of the center of the header. Any ideas on what I should do?
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
}
#nav li{
float:left;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#header{
height:150px;
background-color:darkred;
margin-top:45px;
border:2px solid black;
border-radius:15px;
overflow:hidden;
position:relative;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Much of what I provided will not be useful to this question, and I apologize for that, but I just want to provide as much information as possible to get help. Thanks!
Hi now try to this css
#nav {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0 auto;
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block; // add this
font-size: 14px; // add this
}
#header {
/* margin-top: 45px; */ // remove this line
}
Demo
#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Add these properties to your existing classes.
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
width:100%;
text-align:center;
}
#nav li{
display:inline-block;
}
This should solve your issue.
Make your nav bar take full width, and center the inner contents horizontally using text-align:center;
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/
I was making a preview website and I noticed that the site wasn't displaying the menu in IE9.
I used Fullpage.js as a basic template and added on. I build the menu as suggested in the fullpage.js documentation:
<img class="menuknop" src="img/menuknop.png" alt="Menu button"/>
<ul class="menu">
<li data-menuanchor="Home" class="active"><a href=#Home>Home</a></li>
<li data-menuanchor="About"><a href=#About>About</a></li>
<li data-menuanchor="Concerts"><a href=#Concerts>Concerts</a></li>
<li data-menuanchor="Media"><a href=#Media>Media</a></li>
<li data-menuanchor="Contact"><a href=#Contact>Contact</a></li>
</ul>
and added the following css:
.menuknop{
position: fixed;
top: 1%;
left:1%;
width: 50px;
height: auto;
}
.menu{
position:fixed;
top:1.5%;
left: 80px;
height: 50px;
width: 100%;
padding: 0;
margin:0;
font-size: 1em;
overflow:hidden;
}
.menu li {
display:inline-block;
margin: 0px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
.menu li a{
text-decoration:none;
color: #000;
}
.menu li.active a:hover{
color: #000;
}
.menu li:hover{
background: rgba(255,255,255, 0.8);
}
.menu li a,
.menu li.active a{
padding: 9px 18px;
display:block;
}
.menu li.active a{
color: #fff;
}
The divs are being placed at the correct position but the content is not displaying in IE9.
I've been staring at this for hours and I'm really stuck. Any help would be greatly appreciated.
Here's a link to the test site.
It seems that you need to put z-index on ul.menu and img.menuknop as follows
ul.menu, .menuknop{z-index:99}
this I guess will resolve your issue.