Question

我正在使用CSS3 / HTML和jQuery设计我自己的下拉菜单。我有一些问题但我似乎无法弄清楚为什么我会遇到这个问题。

正如你所看到的，当你将鼠标悬停在“投资组合”上时，右边有一个很大的差距，它推动了一切。我似乎无法弄清楚为什么会这样。

jQuery代码：

<script type="text/javascript">
  $(document).ready(function(){

   $(".nav_link_port").mouseover(function(){$(".nav_link_temp").fadeIn('slow')});
   $(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeIn('slow')});
   $(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeOut('slow')});      
  });
</script>

HTML代码：

<div id="nav">
        <a href="#" class="nav_link">Home</a> 
        <a href="#" class="nav_link">About</a> 
        <a href="#" class="nav_link_port">Portfolio</a> 
        <a href="#" class="nav_link_temp">Templates</a> 
        <a href="#" class="nav_link">Contact</a>
</div>

CSS：

.nav_link {
    display: block;
    float:left;
    font-family: 'Open Sans';
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f7a70e;
    color: #fff;
    margin-right:5px;
    text-decoration:none;
    padding:15px;
    position:relative;
    z-index:100;
        -webkit-transition: background 0.15s linear;
        -moz-transition: background 0.15s linear;
        -ms-transition: background 0.51s linear;
        -o-transition: background 0.15s linear;
        transition: background 0.15s linear;
}
.nav_link_port {
    display: block;
    float:left;
    font-family: 'Open Sans';
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f7a70e;
    color: #fff;
    margin-right:5px;
    text-decoration:none;
    padding:15px;
    position:relative;
    z-index:101;
        -webkit-transition: background 0.15s linear;
        -moz-transition: background 0.15s linear;
        -ms-transition: background 0.51s linear;
        -o-transition: background 0.15s linear;
        transition: background 0.15s linear;

}
.nav_link_temp {
    display:none;
    float:left;
    font-family: 'Open Sans';
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f7a70e;
    color: #fff;
    margin-right:5px;
    text-decoration:none;
    padding:15px;
    position:relative;
    z-index:102;
    top:52px;
    left:-120px;
        -webkit-transition: background 0.15s linear;
        -moz-transition: background 0.15s linear;
        -ms-transition: background 0.51s linear;
        -o-transition: background 0.15s linear;
        transition: background 0.15s linear;    
}
.nav_link:hover {
    background-color: #4f69a3;
}
.nav_link_port:hover,.nav_link_temp:hover  {
    background-color: #4f69a3;
}

我知道我的CSS很乱，我可以解决它，只是一些快速代码来测试我的导航

Answer 1

.nav_link_temp {
    display:none;
 //   float:left;

删除此行

Answer 2

除非你提供有关该项目的更多背景信息（你只是在教自己好玩吗？），我会说，为什么要重新发明轮子？

http://twitter.github.com/bootstrap/components.html#navs

使用Twitter的Bootstrap，弹出所需的组件，你将有一个漂亮风格的下拉导航栏，所花费的时间少于将问题发布到SO！

[基于评论的更新]

http://jsfiddle.net/jgaAg/

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Templates</a>
            </li>
            <li><a href="#">Second Subitem</a>
            </li>
            <li><a href="#">Numero Tres</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>

我把这个小提琴扔给你。相当干净和简单。希望它指出你正确的方向！：）

HTML下拉菜单不需要的间距

2 个答案: