Question

I have a menu bar. The menu bar is horizontal. The sub menu is then extended vertically upon hovering. The items in this sub menu includes Manage subjects, Manual Crawl, Crawl Interval and Archive List. When the mouse is hover to Manage subjects, it should prompt another dropdown list at the right side of it to product a sub sub menu. However, I can make this sub sub menu to appear on the right. its over lapping my sub menu. as i am really new to CSS, i definitely need help in this. i have a feeling i am not even editing
#menu ul li ul li ul, #menu ul li ul li:hover ul ,#menu ul li ul li:hover ul li and #menu ul li ul li ul li a:hover. thank you.

HTML

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Executive Summary</a></li>
        <li><a href="#" > Visual Analytics</a></li> 
        <li><a href="#" >Settings</a>
            <ul>                                      
                <li><a href="#" >Manage Subject</a></li>
                    <ul>
                        <li><a href="#">Add Subject</a></li>
                        <li><a href="#">Edit Subject</a></li>
                        <li><a href="#">Delete Subject</a></li>
                        <li><a href="#">Export Subject</a></li>
                    </ul>
                <li><a href="#">Manual Crawl</a></li>
                <li><a href="#">Crawl Interval</a></li> 
                <li><a href="#">Archive List</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

 #menu {
    position: relative;
    float: left;
    width: 1200px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px;
    padding: 0;    
    background-color:#000;
    text-align: center;
    z-index:1;
}

#menu ul {
    position: relative;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu ul li {
    position: relative;
    float: left;
    height: 100%;
    padding: 0;
    line-height: 35px; 
}

#menu ul li a {
    position: relative;
    height: 100%; 
    width: auto;
    float: left;
    text-decoration: none;
     padding: 0px 10px 0px 10px;   
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu ul li ul {
   display: none;
   width: 150px; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);
}

#menu ul li:hover ul {
    display:block;
   position: absolute;
   top: 35px;
   left: 0;
   margin: 0;
   padding: 0;
   z-index: 1;
   width:150px; 
}

#menu li li a{
    height: 35px; 
    width: 150px;
    float: left;
    text-decoration: none;
    padding: 0px; 
    margin: 0 0px;
    color: #fff;
    text-align: center;
}

#menu ul li ul li a:hover{
   background: rgba(255,255,255,0.5);
   width:150px;
   float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
   background-color: rgba(28,28,240,0.5);
   width:150px;
   float:left;
}​

Answer 1

First Question

You have to wrap the submenus ul in the higher level menuitem li to make them appear correctly. Here is an easy example for the html structure.

<ul id="menu">
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a>
        <ul>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a>
                <ul>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                </ul>
            </li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
        </ul>
    </li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
</ul>

Second Question

The trick for moving the second level submenus to the right was giving them the property left:150px.

#menu ul ul{
    left:150px;               
}

Improvements of your Stylecheet

By the way notice that you can specify all properties of a initially hidden box in css first. Then your :hover selector only needs to set the display:block rule to show the element. If it is hidden by display:none the already set background color won’t be visible.

But there are other points you could improve your stylecheet, too. For example you can set properties for all submenus with the selector #menu ul (if your ul of the menu has the id menu) because they are all lists in your menu. If you want to only set something for the first level submenu you can use #menu > li > ul as it only approaches direct children. For the second level submenus use #menu ul ul.

Using these techniques your stylecheet is more abstract. My solution also works for and unlimited number of levels of submenus. You could for example implement a third level submenu only by adding the html code. The stylecheet can handle it.

Example

Here is a working fiddle of your example: http://jsfiddle.net/m8Bcb/4/

There you can see the improved source code (both html and css) and a working live demo. And with this edit the stylecheet is also commented for your understanding. I hope that helps you and you will continue learning css!