Question

Is there any way for me to use a div as a dropdown menu positio exactly like this? I already tried absolute position but it doesn’t work with other screen size. What I want is for it to work on all screen resolutions. I tried using tables(hiding the td and showing it on hover)but the menu just pushes the contents below it. I desperately need to get this sorted out I’ve been working on it for weeks now and still not even close to what I want. Thank you in advance.

What I tried so far:
jQuery:

$(document).ready(function(){
   $("#hover-here").hover(function(){
     $("#boxed-menu-div").toggle();
  });
});

CSS:

#boxed-menu-div{
  display: none;
  position: absolute;
  top: 100px;
  right: 246px;
 }

This works perfectly only on my screen resolution. I used relative positioning but it only pushes the contents below. Is there any other alternatives to what absolute can do?

Answer 1

Ok… First things first. Tables are a definite no and you don’t need jQuery either.

You have four html elements that combined are designed to do this specific task.

These are <nav>, <ul> <li> and <a>. Now I’m making an assumption here that since you want it to work on all screen sizes then you are wanting this to be responsive, I’m also assuming that since you want rounded corners, gradients, shadows etc then you will be aiming for modern browsers, ie9+ and the others.

Bearing that in mind here would be the html I would use to create a menu.

<nav>
    <ul>
        <li>
            <a href="#">item 1</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
        <li>
            <a href="#">item 2</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
        <li>
            <a href="#">item 3</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
      </ul>
</nav>

The css would go something like this. Please note that I have only created a very rough approximation of what you are after.

body{
    /* Set the overall font*/
    font-family:arial, serif;
}

/* Contain floats: h5bp.com/q */
nav > ul:before, nav > ul:after {
    content: "";
    display: table;
}

nav > ul:after {
    clear: both;
}

nav > ul {
    *zoom: 1;
}

/* Level one */
nav > ul > li {
    float:left;
    position:relative;
    overflow:visible;
    width:30%;
    max-width:100px;
}
nav > ul > li > a{
    padding:.5em 1em;
}

/* Level 2*/
nav > ul > li > ul {
    background:#666;
    border-radius: 0 5px 5px 5px;
    position:absolute;
    z-index:1;
    padding:1em;
    width:200px; /*set to whatever you need*/
    display:none;
}

/* Second list on level 2*/
nav > ul > li:nth-child(2) > ul{
    margin-left:-50%;
    border-radius: 5px;
}

/* Last list on level 2*/
nav > ul > li:last-child > ul{
    right:0;
    border-radius: 5px 0 5px 5px;
}

/* Hover level 1*/
nav > ul > li:hover {
    background:#666;
    border-radius: 5px 5px 0 0;
    color:#fff;
}

nav > ul > li:hover > ul {
    display:block;
}

nav > ul > li:hover > a,
nav > ul > li > ul a{
    color:#fff;
}

nav a {
    text-decoration:none;
    display:block;
}

I’ve included a working example here for you to play with. As you can see this will work from mobile-up. Fullscreen link here resize to see it working.