0

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

http://johns-webdesign.com/portfolioV2/

如您所见，当您将鼠标悬停在“投资组合”上时，右侧有一个很大的差距，它将所有内容都推倒了。我似乎无法弄清楚为什么会这样。

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 很乱，我可以修复它，这只是一些快速代码来测试我的导航

4

2 回答 2

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

删除这一行

于 2013-03-13T19:12:59.087 回答
0

除非您提供有关该项目的更多背景信息（您只是为了好玩而自学吗？），否则我会说，为什么要重新发明轮子？

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>

我为你把这个小提琴放在一起。相当干净和简单。希望它为您指明正确的方向！:)

于 2013-03-13T19:15:16.977 回答