我怎樣才能使垂直子菜單容器位置相同的所有類別

Question

我在垂直子菜單容器位置有問題...我如何使垂直子菜單容器位置相同的所有類別在這裏是我的網站鏈接是使用CSS和java腳本RDS

我想我的垂直子菜單容器位置是這樣的... Snapdeal這是從所有類別的頂部來。

這裏是我的導航

<div class="left_panel"> 
       <div class="box"> 
        <h3>See all Categories</h3> 
        <div id="display_menu"> 
         <ul id="verticalmenu" class="glossymenu padding"> 
          <li><a href="#">4 Camera Systems</a> 
          <ul> 
           <li> 
            <ol> 
             <li><a href="#"><img src="images/cctv.jpg" /></a></li> 
             <li><a href="product_detail.html">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
            </ol> 
            <ol> 
             <li><a href="#"><img src="images/cctv.jpg" /></a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
            </ol> 
            <ol> 
             <li><a href="#"><img src="images/cctv.jpg" /></a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
            </ol> 
           </li> 
          </ul> 
          </li> 
          <li><a href="#">8 Camera Systems</a> 
          <ul> 
           <li> 
            <ol> 
             <li><a href="#"><img src="images/cctv.jpg" /></a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
            </ol> 
            <ol> 
             <li><a href="#"><img src="images/cctv.jpg" /></a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
            </ol> 
            <ol> 
             <li><a href="#"><img src="images/cctv.jpg" /></a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
             <li><a href="#">8 Camera Systems</a></li> 
            </ol> 
           </li> 
          </ul> 
          </li> 
          <li><a href="#">16 Camera Systems</a></li> 
          <li><a href="#">All Camera Systems</a></li> 
`enter code here`       <li><a href="#">Dummy Cameras</a></li> 
          <li><a href="#">Lenses</a></li> 
         </ul> 
        </div> 
       </div> 

       <div class="box" style="margin-top:10px;"> 
        <h3>Quick Links</h3> 
        <div class="quick-links"> 
         <ul> 
          <li> 
           <a href="#"> 
            <img src="images/hot-icon.png" /> 
            <strong>Hot Products</strong> 
            <p>Purchase Today's hot product. To view detail click here...</p> 
           </a> 
           <div style="clear:both;"></div> 
          </li> 
          <li> 
           <a href="#"> 
            <img src="images/special-icon.png" /> 
            <strong>Special Offers</strong> 
            <p>We offer our customers special packages for CCTV Cameras. Click to view detail.</p> 
           </a> 
           <div style="clear:both;"></div> 
          </li> 
          <li> 
           <a href="#"> 
            <img src="images/seasonal_offer_icon.jpg" /> 
            <strong>Seasonal Offers</strong> 
            <p>We offer our customers special packages for CCTV Cameras. Click to view detail.</p> 
           </a> 
           <div style="clear:both;"></div> 
          </li> 
          <li> 
           <a href="#"> 
            <img src="images/download-icon.jpg" /> 
            <strong>Download Brouchure</strong> 
            <p>We offer our customers special packages for CCTV Cameras. Click to view detail.</p> 
           </a> 
           <div style="clear:both;"></div> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 

這裏的HTML是我的javascript

var menuids=new Array("verticalmenu") 
var submenuoffset=-2 

function createcssmenu(){ 
for (var i=0; i<menuids.length; i++){ 
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") 
    for (var t=0; t<ultags.length; t++){ 
    var spanref=document.createElement("span") 
     spanref.className="arrowdiv" 
     spanref.innerHTML="&nbsp;&nbsp;" 
     ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref) 
    ultags[t].parentNode.onmouseover=function(){ 
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px" 
    this.getElementsByTagName("ul")[0].style.display="block" 
    } 
    ultags[t].parentNode.onmouseout=function(){ 
    this.getElementsByTagName("ul")[0].style.display="none" 
    } 
    } 
    } 
} 


if (window.addEventListener) 
window.addEventListener("load", createcssmenu, false) 
else if (window.attachEvent) 
window.attachEvent("onload", createcssmenu) 

，這裏是我的CSS樣式

.left_panel 
{ 
    width:230px; 
    height:auto; 
    float:left; 
    margin:10px 0px 0px 10px; 
} 
left_panel .box 
{ 
    width:230px; 
    height:auto; 
    float:left; 
} 
.left_panel .box h3 
{ 
    font-weight:normal; 
    display:block; 
    background:url(../images/box_heading_bg.png) repeat-x; 
    color:#fff; 
    padding:5px 0px; 
    text-align:center; 
    border-radius:5px 5px 0px 0px; 
} 
#display_menu 
{ 
    box-shadow: 0 1px 8px rgba(0,0,0,0.27); 
    border-radius: 0 0 5px 5px; 
} 
#display_menu ul li 
{ 
    list-style:none; 
    padding:2px 0px 2px 25px; 
    border-bottom:1px dotted #999; 
} 
#display_menu ul li ul 
{ 
    margin-left:3px; 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    border-bottom:1px solid #ccc; 
    border-right:1px solid #ccc; 
    border-radius:0px 5px 5px 0; 
} 
#display_menu ul li ul li 
{ 
    margin:0px; 
    padding:10px; 
    border:none; 
} 
#display_menu ul li ul li ol 
{ 
    width:225px; 
    float:left; 
    margin:0px 10px 20px 0; 
    padding-right:10px; 
    border-right:1px solid #ccc; 
} 
#display_menu ul li ul li ol li 
{ 
    padding:5px 0px 5px 0px; 
    text-align:center; 
    border-bottom:1px dotted #ccc; 
} 
#display_menu ul li a 
{ 
    text-decoration:none; 
    color:#666666; 
    position: relative; 
    z-index: 600; 
    display:block; 
    background:url(../images/arrow.jpg) no-repeat scroll 179px 5px transparent 
} 
#display_menu ul li a:hover 
{ 
    color:#024888; 
    background: url(../images/arrow.jpg) no-repeat scroll 179px -30px transparent; 
    font-weight: bold; 
} 


.glossymenu, .glossymenu li ul{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
width:230px; /*WIDTH OF MAIN MENU ITEMS*/ 
} 

.glossymenu li{ 
position: relative; 
} 


.glossymenu li ul{ /*SUB MENU STYLE*/ 
position: absolute; 
width:760px; /*WIDTH OF SUB MENU ITEMS*/ 
background:#fff; 
left: 0; 
float:left; 
top: 0; 
display: none; 
box-shadow: 0 1px 8px rgba(0,0,0,0.27); 
} 
.glossymenu li ul a 
{ 
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */ 
} 

.glossymenu .arrowdiv{ 
position: absolute; 
right: 2px; 
background: transparent url(arrow.gif) no-repeat center right; 
} 

.glossymenu li a:visited, .glossymenu li a:active{ 
color: #000; 
} 

.glossymenu li a:hover{ 
background-image: url(glossyback2.gif); 
} 

/* Holly Hack for IE \*/ 
* html .glossymenu li { float: left; height: 1%; } 
* html .glossymenu li a { height: 1%; } 
/* End */ 

Answer 1

只需使用位置絕對在隱藏格線這個：

<div class="box"> 
    <div style="position:absolute; display:none;">your hidden box</div> 
</div> ` 

Answer 2

希望這會對你有所幫助。

 
ultags[t].parentNode.onmouseover = function() { 
    this.getElementsByTagName("ul")[0].style.left = this.parentNode.offsetWidth + submenuoffset + "px"; 
    this.getElementsByTagName("ul")[0].style.display = "block"; 
    this.getElementsByTagName("ul")[0].style.position = "absolute"; 
    this.getElementsByTagName("ul")[0].style.top = this.parentNode.offsetTop - this.offsetTop + "px"; 
}