垂直条定位HTML

Question

好的，大家好，我刚刚遇到一个问题，我不知道如何解决。图1显示了当前的情况。我希望橙色/黄色div更像是图片2。有人知道我怎么做这个吗？，我应该将导航栏放入一个块并放置div，然后将其显示为pic 2？

图1

图2

＆＃13;

＆＃13;

/*--------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;
}

＆＃13;

<!--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>

＆＃13;

＆＃13;

＆＃13;

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;
}