Поддержка Проблемы и решения Проблема с отображением третьего уровня выпадающего меню

  • Здравствуйте! На сайте установлено следующее CSS-меню. Раньше оно использовалось как двухуровневое: основной раздел и выпадающий список подразделов. Сейчас понадобилось чтобы в выпадающем списке отображался третий уровень. Необходимо сделать чтобы пункты меню третьего уровня позиционировались справа от родительского пункта второго уровня меню, но мне не удается этого сделать.

    /* Top menu items */
    
    #menu ul {
    
       margin:0;
    
       padding:0;
    
       list-style:none;
    
       float:right;
    
       position:relative;
    
       right:50%;
    
    }
    
    #menu ul li {
    
       margin:0 0 0 1px;
    
    	padding: 0 2px 0 2px;
    
       float:left;
    
       position:relative;
    
       left:50%;
    
       top:5px;
    
    }
    
    #menu ul li a {
    
       display:block;
    
       margin:0;
    
       padding:.6em .5em .4em;
    
       font-size:1em;
    
       line-height:1em;
    
       text-decoration:none;
    
       color:#fff;
    
       font-weight:bold;
    
    }
    
    #menu ul li.active a {
    
       color:#fff;
    
       background:#000;
    
    }
    
    #menu ul li a:hover {
    
       background:#00d2f3; /* Top menu items background colour */
    
       color:#fff;
    
    }
    
    #menu ul li:hover a,
    
    #menu ul li.hover a { /* This line is required for IE 6 and below */
    
       background:#00d2f3; /* Top menu items background colour */
    
       color:#fff;
    
    }
    
    /* Submenu items */
    
    #menu ul ul {
    
       display:none; /* Sub menus are hiden by default */
    
       position:absolute;
    
       top:2em;
    
       left:0;
    
       right:auto; /*resets the right:50% on the parent ul */
    
       width:auto; /* width of the drop-down menus */
    
    }
    
    #menu ul ul li {
    
       left:auto;  /*resets the left:50% on the parent li */
    
       margin:0; /* Reset the 1px margin from the top menu */
    
       clear:left;
    
       width:100%;
    
    }
    
    #menu ul ul li a,
    
    #menu ul li.active li a,
    
    #menu ul li:hover ul li a,
    
    #menu ul li.hover ul li a { /* This line is required for IE 6 and below */
    
    	font-weight:bold; /* resets the bold set for the top level menu items */
    
    	background-color:#005f8f;
    
    	color:#fff;
    
    	line-height:1.4em; /* overwrite line-height value from top menu */
    
    	margin-bottom: 1px;
    
    	text-align: left;
    
    	white-space: nowrap;
    
    }
    
    #menu ul ul li a:hover,
    
    #menu ul li.active ul li a:hover,
    
    #menu ul li:hover ul li a:hover,
    
    #menu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
    
    	background-color:#00d2f3; /* Sub menu items background colour */
    
    	color:#fff;
    
    }
    
    /* Flip the last submenu so it stays within the page */
    
    #menu ul ul.last {
    
       left:auto; /* reset left:0; value */
    
       right:0; /* Set right value instead */
    
    }
    
    /* Make the sub menus appear on hover */
    
    #menu ul li:hover ul,
    
    #menu ul li.hover ul { /* This line is required for IE 6 and below */
    
       display:block; /* Show the sub menus */
    
    }