드롭 다운 메뉴 만들기

Question

메인 메뉴의 링크를 마우스로 가리키면 메인 메뉴 아래에 표시되는 서브 메뉴가 포함 된 메뉴가 있습니다. 내가하고 싶은 일은 첫 번째 하위 메뉴에 두 번째 하위 메뉴를 추가하는 것입니다.하지만 드롭 다운으로 만듭니다. 나는 css에서 위대한 사람이 아니며, 누구든지이 일을 도와 줄 수 있는지 궁금해하고 있었다. 온라인 튜토리얼을 따랐는데 내가 찾던 결과를 얻을 수 없었습니다. 여기에 html과 CSS가 있습니다. 여기

<div id="navigation"> 
<ul id="mymenu"> 
    <li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li> 
    <li><a href="#" onmouseover="javascript:showsubmenu(2)">Gallery</a></li> 
    <li><a href="#" onmouseover="javascript:showsubmenu(3)">What We Do</a></li> 
    <li><a href="#" onmouseover="javascript:showsubmenu(4)">Contact</a></li> 
</ul> 
</div> 
<div id="sublinks"> 
<ul id="s1"> 
    <li><a href="#">General</a></li> 
    <li><a href="#">Landon News</a></li> 
    <li><a href="#">Trust Us</a></li> 
</ul> 
<ul id="s2"> 
    <li> 
     <a href="#">Security Systems</a> 
     <ul id="s2sys"> 
      <li><a href="#">Arlington HA</a></li> 
      <li><a href="#">Enfield HA</a></li> 
      <li><a href="#">Revere HA</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">WLAN Systems</a> 
     <ul id="s2wlan"> 
      <li><a href="#">Beverly HA</a></li> 
      <li><a href="#">Holyoke HA</a></li> 
      <li><a href="#">Meriden HA</a></li> 
      <li><a href="#">Revere HA</a></li> 
     </ul> 
    </li> 
</ul> 
<ul id="s3"> 
    <li><a href="#">Computers</a></li> 
    <li><a href="#">Strategic Planning</a></li> 
    <li><a href="#">Security Systems</a></li> 
    <li><a href="#">WLAN, WiFi Broadband</a></li> 
</ul> 
<ul id="s4"> 
    <li><a href="#">Email</a></li> 
    <li><a href="#">Address Info</a></li> 
</ul> 
</div> 

는 CSS 첫 번째 하위 메뉴 여기

function showsubmenu(id){ 
    submenu = document.getElementById('s'+id); 
    for(i=1;i<=4;i++){ 
     if(i==id){ 
      submenu.style.display="block"; 
     } else { 
      document.getElementById('s'+i).style.display="none"; 
     } 
    } 
} 
sfHover = function() { 
var sfEls = document.getElementById("sublinks").getElementsByTagName("li"); 
for (var i=0; i<sfEls.length; i++) { 
    sfEls[i].onmouseover=function() { 
     this.className+=" hover"; 
    } 
    sfEls[i].onmouseout=function() { 
     this.className=this.className.replace(new RegExp(" hover\\b"), ""); 
    } 
} 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

를 표시합니다 주 메뉴에 대한 자바 스크립트입니다

#navigation{ 
    height:32px; 
    margin:0 auto; 
    width:auto; 
} 
#navigation ul{ 
    height:32px; 
    line-height:32px; 
} 
#navigation ul li{ 
    display:inline; 
} 
#navigation ul li a, 
#navigation ul li a:visited { 
    padding:0 20px; 
    display:block; 
    text-decoration:none; 
    float:left; 
    color:#1361A5; 
    font-weight:bold; 
    text-shadow:#ffffff 2px 2px 2px; 
} 
#navigation ul li a:hover{ 
    color:#C3C2C1; 
} 
/* ----------- Sub Menu ----------- */ 
#sublinks{ 
    width:auto; 
    margin:0 auto; 
    background:#C3C2C1; 
    height:30px; 
    font-size:11px; 
    border-radius:8px; 
    -moz-border-radius:8px; /* Firefox 3.6 and earlier */ 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    -moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    behavior: url(http://localhost/landon/assets/pie/PIE.php); 
    position: relative; 
} 
#sublinks ul{ 
    height:32px; 
    line-height:31px; 
} 
#sublinks ul li{ 
    display:inline; 
} 
#sublinks ul li a, 
#sublinks ul li a:visited { 
    padding:0 10px; 
    display:block; 
    text-decoration:none; 
    float:left; 
    color:#FFFFFF; 
} 
#sublinks ul li a:hover{ 
    text-decoration:underline; 
} 
#sublinks li:hover ul{ 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
} 
#sublinks li:hover li { 
    float: none; 
} 
#sublinks li:hover li a { 
    background-color: #C3C2C1; 
    border-bottom: 1px solid #fff; 
    color: #000; 
    left:50; 
} 
#sublinks li li a:hover { 
    background-color: #8db3ff; 
} 

/* ----------- Hide Sub menu ----------- */ 
#s2, #s3, #s2sys, #s2wlan{display:none;} 

내가 두 번째 하위 메뉴를 확인하면된다하려고 첫 번째 하위 메뉴의 드롭 다운 및 현재 드롭 다운이 아닌 같은 줄에 표시됩니다. 어떻게해야합니까?

Answer 1

http://jsfiddle.net/kVztG/1/

으로 추가하여 드롭 다운 수직을 top 값을 수정하거나해야 할 수 있습니다 하위 하위 메뉴를 아래의 CSS로 변경하십시오.

#sublinks li:hover li { 
    display:block; 
    position:relative; 
    top:30px; 
} 

위치 : 상대와 상단 : 30 픽셀 서브 메뉴 ontop이 나타나지 드롭 다운을 중단하고 디스플레이 : 블록 표시 인라인에서 리튬을 멈춘다.

Answer 2

하위 메뉴에있는 ul 목록에이 CSS를 추가해보세요.

position: absolute; 
top: 30px; 

당신이 찾고있는 결과의 유형에 따라, 당신은 width

Demo: http://jsfiddle.net/4k2Tx/2/