带正常按钮的CSS下拉菜单

问题是我的悬停在所有按钮上都有效，但我不想那样。我想要的是，例如，两个按钮不需要悬停，所以他们可以将您转移到另一个页面，另一个按钮将像现在一样悬停。带正常按钮的CSS下拉菜单

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

的概述按钮和聊天按钮应该与其他人，但他们像设计普通按钮不应该悬停，而且他们应该立即转移到你另一页。其他按钮按我希望的方式工作。而我的问题是，当我点击按钮时，它不会将我转移到任何地方，因为当我点击它时它仍然会使它悬停。

来源

2013-04-06 Delete me

威廉可以请你设置一个的jsfiddle例子来说明你的代码和实现，因此，这将是容易弄清楚你的代码，并给出任何建议。 – Raman 2013-04-06 17:07:14

是的，给我一秒钟。 – 2013-04-06 17:12:50

它是这样的：http://jsfiddle.net/VRBwm/ – 2013-04-06 17:16:28

根据我对你的理解问题。你想概述和聊天按钮作为正常的锚定标记和重定向到href给出的URL，但研究按钮应该照原样工作。那么主要问题在于你的代码菜单 - > li->锚点击，你正在阻止默认的点击行为e.preventDefault()。这将不允许锚标记重定向到href中的url（默认行为）。看到下面的代码，你只需要删除e.preventDefault()，以便锚标记可以重定向到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/

希望这会有所帮助，告诉我，如果需要别的东西。

来源

2013-04-06 17:34:31 Raman

AH ...所以这就是我错过了--_-谢谢！ – 2013-04-06 17:36:07

如果解决了问题，请将其标记为答案。而upvote将是惊人的;-) – Raman 2013-04-06 17:40:47

带正常按钮的CSS下拉菜单

回答

相关问题