Html 将水平导航更改为垂直导航

我有这样的水平导航栏。

我需要使这个导航栏垂直向左。这是我的html

<div ng-controller="PortalController">
    <header>
        <h1>E_Zuite</h1>
        <nav role='navigation'>
            <ul>
                <li><a class="link-1 entypo-home active" href="#home"></a></li>
                <li><a class="link-2 entypo-picture" href="#clients"></a></li>
                <li><a class="link-3 entypo-user" href="#about"></a></li>
                <li><a class="link-4 entypo-mail" href="#contact-us"></a></li>
            </ul>
        </nav>
    </header>
</div>

我确实需要这个导航栏和顶部的图标。我不太熟悉css

header h1{
  float:none;
 }
header nav ul {
  float:none;
 }
header nav ul li{
 display:block;
 width:100%
}

---

只需在css文件中添加css。

将css更改为：

header {
  width: 200px;
  height: 100%;
  box-sizing: border-box;
  background-color: #373948;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 30px;
}

header h1 {
  float: left;
  margin: 5px 0px;
  color: white;
  font-family: 'Meddon', cursive;
}

header nav ul {
  height: 70px;
  float: right;
}

header nav ul li {
  width: 200px;
  height: 70px;
  float: left;
  display: block;
}

我所做的很简单，更改了

标题的宽度

并将高度设置为

100%

，然后我为

li

菜单设置了

宽度

和

浮动

属性

---

它应该按照您的预期工作，但是仔细查看一下，使其完全符合您的需要。

如果您想将垂直导航固定到左侧，下面的代码将有所帮助

 nav{
      position: fixed;//fixes the navigation bar to left 
      top: 100px;
      left: 0px;    
    }
    header {
      width: 100%;
      height: 70px;
      box-sizing: border-box;
      background-color: #373948;
      position: fixed;
      top: 0px;
      left: 0px;
      padding: 0px 0px 0px 30px;
    }

    header h1 {
      float: left;
      margin: 5px 0px;
      color: white;
      font-family: 'Meddon', cursive;
    }

    header nav ul {
      height: 70px;
      width: 30px;
      margin: 0;
      padding: 0;
    }

    header nav ul li {
      display: inline-block;
      width: 30px;
    }

 nav{
      position: fixed;//fixes the navigation bar to left 
      top: 100px;
      left: 0px;    
    }
    header {
      width: 100%;
      height: 70px;
      box-sizing: border-box;
      background-color: #373948;
      position: fixed;
      top: 0px;
      left: 0px;
      padding: 0px 0px 0px 30px;
    }

    header h1 {
      float: left;
      margin: 5px 0px;
      color: white;
      font-family: 'Meddon', cursive;
    }

    header nav ul {
      height: 70px;
      width: 30px;
      margin: 0;
      padding: 0;
    }

    header nav ul li {
      display: inline-block;
      width: 30px;
    }