CSS是一種用于網頁布局和樣式的語言，它可以控制網頁中的各種元素，包括導航菜單。導航菜單通常是水平排列的，但有時我們希望把它豎著排列，這樣可以更好地節約頁面空間、增加可讀性。那么，怎樣實現導航豎著排列呢？
首先，我們需要先將導航菜單的每個鏈接都轉換成塊元素（block element），這樣才能進行垂直排列。我們可以通過設置display屬性為block來實現：
pre{
display:block;
}
接下來，我們需要使用CSS3中的flex布局。flex布局提供了一種方便靈活的方式來控制元素的排列方式，可以輕松實現導航豎著排列。我們可以在菜單容器的樣式中設置flex-direction屬性為column，這樣子元素就會按照垂直方向排列：
pre{
display:flex;
flex-direction:column;
}
最后，我們可以調整菜單項的布局，使其水平居中對齊，并增加一些間距：
pre{
display:flex;
flex-direction:column;
justify-content:center; //水平居中對齊
align-items:center; //垂直居中對齊
}
pre a{
margin:10px 0; //增加上下間距
}
這些CSS樣式就可以將導航菜單垂直排列了。我們可以把它們整合到一個CSS樣式中，方便統一管理：
pre{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
pre a{
margin:10px 0;
}
總結一下，將導航菜單豎著排列的關鍵是使用block元素和flex布局。通過設置display屬性為block，使得菜單項可以豎直排列，并使用flex布局方便地調整布局效果。這樣，我們可以更好地優化網頁結構，讓用戶更加便利地使用我們的網站。