Question

I am trying to create vertical menu bar for a university website. I’m having a problems implementing the display of sub-level lists. my current code produces quite weird results. how can I correct that?

HTML code:

    <div class="nav">
        <ul class="top-level">
            <li><a href="#">EME Alumni</a></li>
            <li>
                <a href="#">Alumni Reunion 2012</a>
                <ul class="sub-level">
                    <li><a href="#">RSVP</a></li>
                    <li><a href="#">Organizing Team</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Alumni Reunion 2012</a>
                <ul class="sub-level">
                    <li><a href="#">RSVP</a></li>
                    <li><a href="#">Organizing Team</a></li>
                </ul>
            </li>
        </ul>
    </div>​

the CSS is:

     .nav {
margin: 3%;
width: 225px;
float: left;
}
.nav ul{list-style: none;margin:0;}
.nav a {
    float: left;
    list-style: none;
    display:block;
    text-decoration: none;
    font-size: 1.25em;
    color: #696969;
    padding: 10px;
    width: 225px;
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9),     to(#C0C0C0));
    }
    .nav a:hover {background: -webkit-gradient(linear, left top, left bottom,   from(#C0C0C0), to(#A9A9A9));}
    ul.sub-level {
        margin-left: 110%;
        display:none;
     } 
     li:hover .sub-level {
          display: block;
     }

​

here is the link to the jsfiddle demo

Answer 1

You need to absolutely-position the sub-menu, therefore its parent needs to be positioned relatively:

.nav li {position:relative}

ul.sub-level { 
    display:none;
    position:absolute;
    left:250px;
    top:0;
}

You don’t need to float your A-tag, nor do you need position:relative on it since it has no children.