需要CSS帮助吗？需要下拉菜单以降低显示效果

问题描述：

我有一个导航栏（'关于我们'，'寻找帮助'，'支持我们'，'训练'，'为我们工作'），在鼠标悬停时，显示该特定标题的下拉菜单。该下拉显示'在'以下的div顶部......这正是我想要的。需要CSS帮助吗？需要下拉菜单以降低显示效果

问题是，虽然我想要在鼠标悬停上显示的下拉div与包含“关于我们”，“寻找帮助”等的div的底部完全对齐，并且此刻它没有。

有关我如何实现这一目标的任何想法？

顺便说一句，我使用的蓝图框架和jQuery ...

<style type="text/css" media="screen"> 
<!-- 
    BODY { 
    font: .72em Candara, "Trebuchet MS", verdana, arial, sans-serif; 
    font-size: 86%; 
    background: url(./images/body-bg.jpg) repeat-y scroll center top #eae9e7;} 

h2 { 
    color: #262161; 
    margin-bottom: 5px; 
} 

h3 { 
     color:white; 
     padding:5px; 
     margin-bottom:0; 
     border-radius: 5px 5px 0px 0px; 
     -moz-border-radius: 5px 5px 0px 0px; 
     -webkit-border-radius: 5px 5px 0px 0px; 
    } 

#tabH {margin-bottom:10px;} 

div.tabs > div h2 { 
     margin-top: 0; 
    } 

div.tabs > a { 
     text-decoration:none; 
    } 

#topnav li { 
    list-style:none; 
    } 

.navhead { 
    width:135px; 
    padding:3px; 
    margin-right:2px; 
    float:left; 
    border-radius: 5px 5px 0px 0px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    background-color: #F3F3F4; 
    border-top: 1px silver solid; 
    border-right: 1px silver solid;   
    } 

.navhead a 
    { 
     font-size:1.2em; 
     text-decoration:none; 
    } 

    .navheadhover { 
     background: #262161; 
     color: white; 
    } 

    .navcontent { 
     background-color:white; 
     border: 1px solid #262161; 
     padding: 3px; 
     position:absolute; 
    } 

    .navcontent p, headTxt p {padding:5px;} 

    #headline { 
     margin-bottom:20px; 
    } 

    .blue-bg { 
     background-color:#262161; 
     }   

#footer { 
    clear:both; 
    background: url(./images/footer.jpg) no-repeat scroll 0 0; 
    background: url(./images/body-bg.jpg) repeat-y scroll center top #eae9e7;  
    } 
--> 
</style> 
    <script> 
    $(document).ready(function() 
    { 
     var navContainers = $('.navcontent'); 
     navContainers.hide(); 

     $('div.tabs a').mouseover(function() 
      { 
       var myhash=$(this).attr('hash'); 
       console.log ('hash = ' + myhash);    
       navContainers.hide(); 
       navContainers.filter(this.hash).show(); 
       $('.navhead').removeClass('navheadhover'); 
       $(this.parentNode).addClass('navheadhover');  
       return false; 
      }) 

     $('.navcontent, .navigation-container').mouseleave(function() 
      { 
       $('.navhead').removeClass('navheadhover'); 
       navContainers.hide(); 
       return false; 
      }) 
    }); 
</script>

这里的HTML：

<script type="text/javascript" src="jquery152.js"></script> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>Tabs</title> 
    </head> 
    <body class="container"> 
    <div class=span-24> 
    <BR> 
    <div id=logo class='span-4'> 
     <img src="./images/CANFull10.jpg"> 
    </div> 
    <div id=tabH class="tabs span-20 last navigation-container"> 
     <br><br> 
     <ul id=topnav class="right"> 
      <li class='navhead'><a href="#first" id=mark>About Us</a><br>What we do & how you can help.</li> 
      <li class='navhead'><a href="#second" id=services>Looking For Help</a><br>Find a service to help you.</li> 
      <li class='navhead'><a href="#third" id=otherstuff>Support Us</a><br>More here. Second line of text</li> 
      <li class='navhead'><a href="#fourth" id=otherstuff>Training</a><br>See our courses. more text here.</li> 
      <li class='navhead'><a href="#fifth" id=otherstuff>Work for Us</a><br>See what we offer. more text here.</li> 
     </ul> 

      <div id="first" class="navcontent span-20"> 
       <h2>About Us</h2> 
        <p> Some text here maybe followed by some links</p> 
        <ul> 
         <li>Link One</li> 
         <li>Link Two</li> 
         <li>Link Three</li> 
        </ul> 
      </div> 
      <div id="second" class="navcontent span-20"> 
       <h2>Looking for Help</h2> 
        <p>Eastman Kodak, the company that invented the hand-held camera, has filed for bankruptcy protection. The move gives the company time to reorganise itself without facing its creditors, and Kodak said that it would mean business as normal for customers. The company has recently moved away from cameras to refocus on making printers to stem falling profits. The 133-year-old firm has struggled to keep up with competitors who were quicker to adapt to the digital era. Announcing the move to seek bankruptcy protection, Antonio M Perez, Kodak's chairman and chief executive, said: "The board of directors and the entire senior management team unanimously believe that this is a necessary step and the right thing to do for the future of Kodak."   </p> 
      </div> 
      <div id="third" class="navcontent span-20"> 
       <h2>Support Us</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      <div id="fourth" class="navcontent span-20"> 
       <h2>Training</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      <div id="fifth" class="navcontent span-20"> 
       <h2>Work for Us</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div>    

    </div> 
    </div> 
    <div id=headline class="span-24"> 
    <div class='span-16'> 
     <img src="./images/place.jpg" alt="CAN is a one of the Best Companies to work for." title="CAN is a one of the Best Companies to work for."> 
    </div> 
    <div class='span-8 last' > 
     <h3 class=blue-bg>One of the best!</h3> 
     <p>Being a best company goes beyond the bottom line. <br><br> 
     It's about excelling in every area throughout the workplace and an organisation's commitment to its most important assets - its workforce.<br><br> 
     Focusing on employees brings real benefits such as, improved workplace engagement, better staff retention.</p> 
    </div> 
    </div> 

    <div id=footer class='span-24'> 
<div class='span-12'>Footer</div> 
    </div>

一个http://jsfiddle.net会真的帮助这里。 – 2012-04-12 09:29:32

请提供一个工作示例？ – 2012-04-12 09:46:53

http://work.can.org.uk/tabs-basic.html上的问题示例 – user1106252 2012-04-13 08:12:34

答

我认为this是你所需要的。

尝试设置navicon的max-height和overflow。

感谢您的回复，但也许我并不清楚在我之后的解释中......目前的顶部'dropdown'项目出现在标题（关于我们，寻找帮助等）的正下方，我希望它出现在ul的下面... – user1106252 2012-04-12 09:40:23

是的绝对，但如果你试图更清楚地解释，可以帮助你很多。在你的问题中，你表示你需要菜单顶部的下拉菜单应该与菜单的高度相同。如果不是，如果你提供更多细节，我们可以帮助你更好地办法。 – coder 2012-04-12 09:42:38

不，不是要找到与菜单相同的高度，只需查找下拉的顶部以排列ul的底部。 – user1106252 2012-04-12 09:45:55

需要CSS帮助吗？需要下拉菜单以降低显示效果

相关推荐