垂直栏定位HTML

Question

好吧你好家伙，我刚来过一个问题，我不知道如何解决。图1显示了目前的情况。我希望橙色/黄色的div更像图片2。有人知道我可以做到这一点吗？，我应该把导航栏放入一个块，然后把div放在它之后，所以它不像图片2？

产品图1

产品图2

/*--------Menu--------*/ 
 

 
.Gnav ul { 
 
    list-style: none; 
 
} 
 

 
.Gnav li { 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    border-bottom: none; 
 
} 
 
    
 
.Gnav a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 24px; 
 
} 
 
    
 
.Gnav a:hover { 
 
    color: orange; 
 
} 
 

 
.FoodMenu { 
 
    color: orange; 
 
    padding: 20px 0px 0px 20px; 
 
    
 
} 
 

 
.DrinksMenu { 
 
    color: orange; 
 
    padding: 20px 0px 0px 20px; 
 
} 
 

 
.Menu { 
 
    background-color: #e4e4e4; 
 
    padding-bottom: 20px; 
 
} 
 

 
.VerticalLineMenu { 
 
    border-left: 3px solid orange; 
 
    height: 500px; 
 
}

<!--Menu--> 
 
<div id="menu"></div> 
 
<h2 class="text-center" style="padding-top:10px;">Menu</h2> 
 
<br> 
 
<br> 
 
<div class="container"> 
 
    <div class="Menu"> 
 
     <nav class="Gnav"> 
 
      <h1 class="FoodMenu">Food</h1> 
 
       <ul> 
 
        <li><a href="NavMenu/Food/Sandwiches.html">Sandwiches</a></li> 
 
        <li><a href="NavMenu/Food/Pizza.html">Pizza</a></li> 
 
        <li><a href="NavMenu/Food/Pasta.html">Pasta</a></li> 
 
        <li><a href="NavMenu/Food/Burgers.html">Burgers</a></li> 
 
        <li><a href="NavMenu/Food/Salad.html">Salad</a></li> 
 
        <li><a href="NavMenu/Food/Steaks.html">Steaks</a></li> 
 
        <li><a href="NavMenu/Food/Kids.html">Kids Menu</a></li> 
 
       </ul> 
 
      <h1 class="DrinksMenu">Drinks</h1> 
 
       <ul> 
 
        <li><a href="NavMenu/Drinks\Soft Drinks.html">Soft Drinks</a></li> 
 
        <li><a href="NavMenu/Drinks\Beer.html">Beer</a></li> 
 
        <li><a href="NavMenu/Drinks\Wine.html">Wine</a></li> 
 
        <li><a href="NavMenu/Drinks\Champagne.html">Champagne</a></li> 
 
        <li><a href="NavMenu/Drinks\Coffee.html">Coffee</a></li> 
 
        <li><a href="NavMenu/Drinks\Water.html">Water</a></li>  <!--bara en bild ist för en tab--> 
 
       </ul> 
 
       <div class="VerticalLineMenu"></div> 
 
      </div> 
 
     </nav> 
 
    </div> 
 
</div> 
 

 

 
    <h1 class="pMenu">Feel free to search for your favorite food, a simple click...</h1>

Answer 1

在CSS变化

.VerticalLineMenu { border-left: 3px solid orange; height: 500px; }

到

.VerticalLineMenu { 
    border-top: 3px solid orange; 
    width: 500px; 
} 

和在HTML切割和过去该代码进一步向上

或添加到CSS

position : absolute; 
top:0; 

=

.VerticalLineMenu { 
    border-left: 3px solid orange; 
    height: 500px; 
position : absolute; 
    top:0; 
}