CSS 일반 버튼이있는 드롭 다운 메뉴

Question

문제는 내 버튼이 모든 버튼에서 작동한다는 것입니다.하지만 그렇게하고 싶지는 않습니다. 내가 원하는 것은, 예를 들어, 마우스를 가져갈 필요가없는 두 개의 버튼을 가지고 있기 때문에, 그들은 당신을 다른 페이지로 옮길 수 있고, 이제는 그들이 떠 올릴 다른 버튼을 가질 수 있습니다.

CSS :

#wrapper { 
    width:173px; 
    margin: 0 3px 0 0; 
    display: inline-block; 
/* width: 220px; 
    margin: 100px auto; 
    font-size: 0.8125em;*/ 
} 
.menu { 
    width: auto; 
    height: auto; 
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); 
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); 
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); 
} 
.menu > li > a { 
    background-color: #616975; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); 
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); 
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); 
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); 
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); 
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); 
    border-bottom: 1px solid #33373d; 
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; 
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98; 
    box-shadow: inset 0px 1px 0px 0px #878e98; 
    width: 100%; 
    height: 2.75em; 
    line-height: 2.75em; 
    display: block; 
    position: relative; 
    font-weight: 600; 
    color: #fff; 
    text-shadow: 0px 1px 0px rgba(0,0,0,.5); 
} 
.menu ul li a { 
    background: #fff; 
    border-bottom: 1px solid #efeff0; 
    width: 100%; 
    height: 2.75em; 
    line-height: 2.75em; 
    display: block; 
    position: relative; 
    font-size: 0.923em; 
    font-weight: 400; 
    color: #878d95; 
} 
.menu ul li:last-child a { 
    border-bottom: 1px solid #33373d; 
} 
.menu > li hr > a:hover, 
.menu > li > a.active { 
    background-color: #35afe3; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219))); 
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); 
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); 
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); 
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); 
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); 
    border-bottom: 1px solid #103c56; 
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; 
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; 
    box-shadow: inset 0px 1px 0px 0px #6ad2ef; 
} 
.menu > li > a.active { 
    border-bottom: 1px solid #1a638f; 
} 
.menu > li > a:before { 
    content: ''; 
    background-image: url(../images/sprite.png); 
    background-repeat: no-repeat; 
    font-size: 36px; 
    height: 1em; 
    width: 1em; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    margin: -.5em 0 0 0; 
} 
.item1 > a:before { 
    background-position: 0 0; 
} 
.item2 > a:before { 
    background-position: -38px 0; 
} 
.item3 > a:before { 
    background-position: 0 -38px; 
} 
.item4 > a:before { 
    background-position: -38px -38px; 
} 
.item5 > a:before { 
    background-position: -76px 0; 
} 
.item6 > a:before { 
    background-position: -76px -76px; 
} 
.item7 > a:before { 
    background-position: -114px 0; 
} 
.item8 > a:before { 
    background-position: -114px -114px; 
} 
.item9 > a:before { 
    background-position: -152px 0; 
} 
.item10 > a:before { 
    background-position: -152px -152px; 
} 
.item11 > a:before { 
    background-position: -190px 0; 
} 
.item12 > a:before { 
    background-position: -190px -190px; 
} 
.menu > li > a span { 
    font-size: 0.857em; 
    display: inline-block; 
    position: absolute; 
    right: 1em; 
    top: 50%; 
    background: #48515c; 
    line-height: 1em; 
    height: 1em; 
    padding: .4em .6em; 
    margin: -.8em 0 0 0; 
    color: #fff; 
    text-indent: 0; 
    text-align: center; 
    -webkit-border-radius: .769em; 
    -moz-border-radius: .769em; 
    border-radius: .769em; 
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); 
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); 
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); 
    text-shadow: 0px 1px 0px rgba(0,0,0,.5); 
    font-weight: 500; 
} 
.menu > li > a:hover span, .menu > li a.active span { 
    background: #2173a1; 
} 
.menu > li > ul li a:before{ 
    content: '?'; 
    font-size: 8px; 
    color: #bcbcbf; 
    position: absolute; 
    width: 1em; 
    height: 1em; 
    top: 0; 
    left: -2.7em; 
} 

.menu > li > ul li:hover a, 
.menu > li > ul li:hover a span, 
.menu > li > ul li:hover a:before { 
    color: #32373D; 
} 

.menu ul > li > a span { 
    font-size: 0.857em; 
    display: inline-block; 
    position: absolute; 
    right: 1em; 
    top: 50%;/
    background: #fff; 
    border: 1px solid #d0d0d3; 
    line-height: 1em; 
    height: 1em; 
    padding: .4em .7em; 
    margin: -.9em 0 0 0; 
    color: #878d95; 
    text-indent: 0; 
    text-align: center; 
    -webkit-border-radius: .769em; 
    -moz-border-radius: 769em; 
    border-radius: 769em; 
    text-shadow: 0px 0px 0px rgba(255,255,255,.01)); 
} 

HTML : 다른 사람하지만 그들은 같은 디자인

 <div id="wrapper"> 
      <ul class="menu"> 
       <li class="item1"><a href="?page=overview">{$lm_overview} </a> 
        </li> 
       <ul> 
       <li class="item2"><a href="?page=chat">{$lm_chat} <span>{$chatusers}</span></a> 
        </li> 
       </ul> 
       <li class="item3"><a href="#">{$lm_research} </a> 
        <ul> 
         <li class="subitem1"><a href="#">Cute Kittens </a></li> 
         <li class="subitem2"><a href="#">Strange "Stuff" </a></li> 
         <li class="subitem3"><a href="#">Automatic Fails </a></li> 
        </ul> 
       </li> 
    </ul> 
    </div> 
<script type="text/javascript"> 
    $(function() { 

     var menu_ul = $('.menu > li > ul'), 
       menu_a = $('.menu > li > a'); 

     menu_ul.hide(); 

     menu_a.click(function(e) { 
      e.preventDefault(); 
      if(!$(this).hasClass('active')) { 
       menu_a.removeClass('active'); 
       menu_ul.filter(':visible').slideUp('normal'); 
       $(this).addClass('active').next().stop(true,true).slideDown('normal'); 
      } else { 
       $(this).removeClass('active'); 
       $(this).next().stop(true,true).slideUp('normal'); 
      } 
     }); 

    }); 
</script> 

Image Link

개요 버튼을 채팅 버튼이 있어야 할 일반 버튼 마우스를 가져 가면 안됩니다. 또한 다른 페이지. 다른 단추는 내가 원하는대로 작동합니다. 그리고 내 문제는 그것이 내가 그것을 클릭 할 때 여전히 공중제비가되기 때문에 개요 버튼을 클릭하면 아무데도 전송하지 않을 것입니다.

Answer 1

귀하의 궁금증에 따라 질문하십시오. 원하는 경우 개요 및 채팅 채팅 버튼이 정상 앵커 태그로 작동하고 href에있는 URL로 리디렉션되지만 연구 버튼이 그대로 작동해야합니다. 음, 주요 문제는 메뉴 -> li-> 앵커 클릭에 대한 코드에서 기본 클릭 동작을 방지하고 있습니다 e.preventDefault(). 앵커 태그가 href의 url로 리다이렉트하는 것을 허용하지 않습니다 (기본 동작). 아래 코드를 참조하십시오. e.preventDefault() 만 제거하면 앵커 태그가 URL로 리디렉션되고 조사 버튼과 기타 유사 URL은 #에 href이되므로 URL로 리디렉션되지 않습니다. 여기

menu_a.click(function(e) { 

    if(!$(this).hasClass('active')) { 
     menu_a.removeClass('active'); 
     menu_ul.filter(':visible').slideUp('normal'); 
     $(this).addClass('active').next().stop(true,true).slideDown('normal'); 
    } else { 
     $(this).removeClass('active'); 
     $(this).next().stop(true,true).slideUp('normal'); 
    } 
}); 

업데이트 된 jsfiddle이 다른 뭔가가 필요하면 말해, 도움이 http://jsfiddle.net/VRBwm/1/

희망입니다.