将 ul li 从水平更改为垂直答案

【问题标题】：change ul li from horizontal to vertical将 ul li 从水平更改为垂直
【发布时间】：2016-06-13 07:27:03
【问题描述】：

我正在尝试做一个菜单，当窗口宽度调整为小分辨率时会出现。下面是下面的HTML和CSS

<nav>
 <a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
 <ul>
    <li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
    <li><a href="http://localhost/influenza/articles.php">Articles</a></li>
    <li><a href="http://localhost/influenza/webinars.php">Webinars</a></li>
 </ul>
</nav>

CSS：

nav ul
{
    list-style:none;
}
nav li{
    display:inline;
    line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
   text-decoration:none;
   font-size:1.4em !important;
   outline:1px solid blue;
   padding:8px;
   letter-spacing:0.9px;
   margin-left:18px;
}  
nav li:not(:first-child) > :only-child{
   color:blue;
}
nav ul > :first-child a{
  color:white !important;
  background:blue;
}

水平输出：

Home    Articles    Webinars

如何将列表恢复为垂直，然后将“ul”位置设置为绝对位置并使“nav a”可见。该列表应垂直显示如下

Home
Articles
Webinars

【问题讨论】：

标签： html css

【解决方案1】：

nav{
    position:relative;
}
nav ul
{
    position:absolute;
    top:40px; /* this height is same as the menu.png */
    left:0;
    z-index:999;
    list-style:none;
}
nav li{
    list-style:none;
    display:block;
}
nav ul li a{
    display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
   text-decoration:none;
   font-size:1.4em !important;
   outline:1px solid blue;
   padding:8px;
   letter-spacing:0.9px;
   margin-left:18px;
}  
nav li:not(:first-child) > :only-child{
   color:blue;
}
nav ul > :first-child a{
  color:white !important;
  background:blue;
}

<nav>
 <a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
 <ul>
    <li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
    <li><a href="http://localhost/influenza/articles.php">Articles</a></li>
    <li><a href="http://localhost/influenza/webinars.php">Webinars</a></li>
 </ul>
</nav>

【讨论】：