Creation of Navigation Menu

Hi all,

I am learning to create this nav menu.

I've tried it on my own, but I can't figure out quite a few things.

I am learning to recreate this dropdown menu.

http://seowptheme.com/

So far, I have managed to create the dropdown but how do I push the starting point of the dropdown menu further down?

If I give the top position too big a value, the dropdown menu disappears when I try to mouse over it due to the gap between the main menu item and the start of the dropdown menu.

I tried to adjust line-height and height of the main UL item. But invariably, it causes the entire row of UL to move further down, which removes it from its original centered position on the row. Also, it stretches the height of each individual sub item.

This is what I have achieved so far - http://startups.maxnathaniel.com/

#mainMenu {
    position: relative;
}

#mainMenu ul {
    list-style: none;
    float: right;
    background-color: #FFFFFF;
}

#mainMenu ul li {
    position: relative;
    display: inline;
    float: left;
    /*padding-right: 1.5em;*/
    font-size: 1.2em;
    zoom:1;
    overflow: hidden;
}

#mainMenu>ul>li {
    line-height: 2em;
}

#mainMenu ul li:hover {
    overflow: visible;
}

#mainMenu ul li a {
    float: left;
    text-decoration: none;
    color: black;
    padding: 0 1em;
}

#mainMenu>ul>li:last-child a {
    padding:0.4em 1em 0.4em 1em;
    border-radius:4px;
    background-color: #00b200;
    color: #FFFFFF;
}

#mainMenu ul li a:hover{
    text-decoration: none;
}

#mainMenu>ul>li:last-child a:hover {
    background-color: #006600;
}

#mainMenu ul ul{
    position: absolute;
    top: 2em;
    left: 0;
    width: 10em;
    margin-left: 0;
    height: auto;
    border: solid #CCC;
    border-width: 0 1px 1px;
}

#mainMenu ul ul:first-child{
    padding-top: 2em;
}

#mainMenu ul ul li,
#mainMenu ul ul a {
    display:block;
    float:none;
    border:0;
    box-shadow:none;
    text-align:center;
    font-size: 1em;
    padding: 0.4em;
    text-align: left;
}

#mainMenu ul ul li:first-child {
    border-top:1px solid rgb(72, 147, 196);
}

#mainMenu ul ul li {
    border-top: 1px solid #e9e9e9;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
    background:#FFFFF;
    color:#333;
}

#mainMenu ul ul li {
    font-size: 0.8em;
}

#mainMenu ul ul li a {
    color:#8C8C8C;
}

Code (markup):

Would appreciate any help. Thank you!

 

Instead of background on the UL, pad the top of the dropdown's ul. That will push it's contents down without moving the UL itself, so no gap issues... you then put the background on the LI or anchors. I'd go with the anchors since styling LI can have real problems in IE8 and some versions of FF... which is why I'd also be setting those borders on the anchors instead of the LI too.

 

Ah yes, I added padding to dropdown's ul. Makes perfect sense! Thank you for pointing that out!