Question

I am a css newbie. I have created a menu in which there is a small space appearing between the menu and the drop down menu which caused the hover effect to break. Please help me out. Thanks

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    width: 958px;
    /*margin: 60px auto;*/
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);

    box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}
#menu li {
    float: left;
   /* border-right: 1px solid #222;*/
    box-shadow: 1px 0 0 #444;
    position: relative;
    box-sizing: border-box; 
    width: 20%;
}

#menu a {
    float: left;
       padding: 11px 64px;
    color: #999;
    text-transform: uppercase;

    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1000000;    
    background: #444;    
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);    

    transition: all .2s ease-in-out;
    width: 100%;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    width:100%;


    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);        
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #111;
}
#menu ul li:first-child > a {
    /*border-radius: 3px 3px 0 0;*/

}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;    
}

#menu ul li:first-child a:hover:after {
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #000; 
    border-bottom-color: transparent;

}

#menu ul li:last-child > a {
    /*border-radius: 0 0 3px 3px*/;
}

Here is the html,

<ul id="menu">
    <li><a href="#">About </a></li>
    <li><a href="#">Programmes</a><ul>
        <li><a href="#">Undergraduate</a></li>
        <li><a href="#">Postgraduate</a></li>
    </ul></li>
    <li><a href="#">Academics</a></li>
    <li><a href="#">Research</a></li>
    <li><a href="#">Facilities</a></li>
</ul>

Answer 1

Add:

ul#menu {margin-top:-5px !important;}

The !important tag takes presence over your other margin settings for #menu ul. Adjust as needed to drop down directly below the parent menu item.

Also, if using Chrome right click any element and ‘Inspect Element’. Styling will render live for you and allow you to make changes without editing, saving, uploading CSS files to see effects.

On Firefox, download Firebug for the same tools.