矩形 div 内的适合按钮

Question

对于网站设计，我正在制作一个位于顶部的导航栏，让用户可以快速查看网站提供的内容。在下图中，我以图形方式显示了问题

#导航栏{ 位置：绝对； 顶部：140 像素； 左：460px； 宽度：980px； 高度：200px； 背景色：rgb(246, 246, 246); 溢出：隐藏；

      }
      li {
          list-style: none;
      }
      .navButton {
          position: absolute;
          top: 65px;
          left: 0px;
          width: 350px;
          height: 75px;
          background-color:rgb(18, 65, 91);
          color: white;
          margin-left: 0px;
          display:inline-block;
          text-align: center;
          -moz-transform: rotate(270deg);
          -moz-transform-origin: 50% 50%;
          -webkit-transform: rotate(310deg);
          -webkit-transform-origin: 50% 50%;
          font-weight: bold;
      }
      div span {
          position: relative;
          top: 15px;
          font-size: 29px;
      }
      .navButton:nth-of-type(1):before {
          content:"";
          position:absolute;
          height:170px;
          width:350px;
          background-color:rgb(18, 65, 91);
          top:-165px;
          left:-50px;
      }
      .navButton:nth-of-type(8):after {
          content:"";
          position:absolute;
          height:170px;
          width:350px;
          background-color:rgb(18, 65, 91);
          top:65px;
          left:50px;
      }
      div span {
          position: relative;
          top: 15px;
          font-size: 29px;
      }
      .buttonContent {
          position: absolute;
          right: 200px;
          top: 50px;
          background-color: #F2F2F2;
          width: 300px;
          visibility: hidden;
      }
      .buttonContent a {
          text-decoration: none;
          color: black;
          font-weight: bold;
      }
      .buttonContent a:hover {
          color: rgb(18, 65, 91);
      }
      .navButton:hover > .buttonContent {
          visibility: visible;
      }
      </style>

    <div id="navBar" style="">
      <table>
         <tr>
           <td>
            <ul>
                  <li>
                    <div class="navButton" style="left:-40px;"> <span> Getting Started  </span>

                        <div class="buttonContent"> <a href="#"> More about Partner Portal</a>
                            </br>   <a href="#"> Discover 3DSWYM</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:70px;"><span> Our Solutions  </span> 
                        <div class="buttonContent"> <a href="#"> Industry Sales Kits</a>
                            </br>   <a href="#"> Brand Sales </a>
                            </br>   <a href="#"> Other Product Lines </a>
                            </br>   <a href="#"> Discover R2014x</a>
                            </br>   <a href="#"> Discover R2014x</a>
                            </br>   <a href="#"> Packagin & Portfolio 2014x</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:180px;"><span> Sales </span>

                        <div class="buttonContent"> <a href="#">Agreements & Policies</a>
                            </br>   <a href="#">Pricing</a>
                            </br>   <a href="#">Online Services</a>
                            </br>   <a href="#">3DEXPERIENCE Platform</a>
                            </br>   <a href="#">Sales Support R2014x</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:290px;"><span> Marketing </span>

                        <div class="buttonContent"> <a href="#">Marketing R2014x</a>
                            </br>   <a href="#">Marketing & Communication</a>
                            </br>   <a href="#">Campaigns in-a-box</a>
                            </br>   <a href="#">Marketing Online Services </a>
                            </br>   <a href="#">Branding Materials</a>
                            </br>   <a href="#">Solutions Partner Labels</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:400px;"><span>   Customer Support 
                      </span> 
                        <div class="buttonContent"> <a href="#">Our Mission</a>
                            </br>   <a href="#">Roles & Responsibilities</a>
                            </br>   <a href="#">Support Resources</a>
                            </br>   <a href="#">Dassault Systemes Partners Support Tool</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:510px;"><span> Training </span> 
                        <div class="buttonContent"> <a href="#"> Training Programs</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:620px;"><span> Technical Resources </span> 
                        <div class="buttonContent"> <a href="#">Pre-Sales Support R2014x</a>
                            </br>   <a href="#">VS Sales KickOff 2014 Presentations</a>
                            </br>   <a href="#">V6 Deployment Optimizations</a>
                            </br>   <a href="#">Dsx.client Portal</a>
                            </br>   <a href="#">3DSWYM Communities</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:730px;"><span> Contact Us </span> 
                    </div>
                </li>
                <li></li>
            </ul>
        </td>
    </tr>
    </table>
   </div>

所以我使用了@BeatAlex 帮助我修改的版本， 小提琴在下面

The jfiddle Link!

现在你可以看到，有一个 div-class: 'buttonContent'，它出现在每个相应的 navButton 下方，现在由于溢出隐藏属性而被隐藏

Answer 1

你可以在#navBar上做overflow:hidden;；

JSFiddle

或增加宽度以使其更对角并删除border-radius。

JsFiddle

所有位都被着色：

JsFiddle

Answer 2

您可以将overflow: hidden 添加到#navbar 元素。如果您不希望它切断底部/右侧，您可以使用 overflow-x 或 overflow-y

SEE FIDDLE