HTML和CSS将水平树旋转为垂直树

我有一棵水平的树。 如何垂直旋转树？ 我想要这样的东西 这是水平树的代码： 这是我的代码：

树胶{
填充顶部：20px；位置：相对；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
浮动：左；文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.tree li:：之前，.tree li:：之后{
内容：''；
位置：绝对；顶部：0；右侧：50%；
边框顶部：1px实心#ccc；
宽度：50%；高度：20px；
}
李树：之后{
右：自动；左：50%；
左边框：1px实心#ccc；
}
.tree li:独生子女：：之后，.tree li:独生子女：：之前{
显示：无；
}
.tree li:唯一的子项{padding top:0；}
.tree li:first child:：before、.tree li:last child:：after{
边界：0无；
}
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
.树ul：：以前{
内容：''；
位置：绝对；顶部：0；左侧：50%；
左边框：1px实心#ccc；
宽度：0；高度：20px；
}
李树先生{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.树李a:悬停，.树李a:悬停+ul李a{
背景：#c8e4f8；颜色：#000；边框：1px实心#94a0b4；
}
.树李a:悬停+ul李：：之后，
.树李a:悬停+ul李：：之前，
.树李a:悬停+ul：：之前，
.树李a:悬停+ul:：之前{
边框颜色：#94a0b4；
}
.我的按钮{
-moz盒阴影：0px 1px 0px 0px#f0f7fa；
-网络工具包盒阴影：0px 1px 0px 0px#f0f7fa；
盒影：0px 1px 0px 0px#f0f7fa；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#33bdef）、颜色停止（1，#019ad2））；
背景：-莫兹线性梯度（顶部，5%，019ad2 100%）；
背景：-webkit线性梯度（顶部，5%，019ad2 100%）；
背景：-o-线性梯度（顶部，#33bdef 5%，#019ad2 100%）；
背景：-ms线性梯度（顶部，#33bdef 5%，#019ad2 100%）；
背景：线性梯度（至底部，#33bdef 5%，#019ad2 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#33bdef'，endColorstr='#019ad2'，GradientType=0）；
背景色：#33bdef；
-moz边界半径：6px；
-webkit边界半径：6px；
边界半径：6px；
边框：1px实心#057fd0；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：Arial；
字体大小：15px；
字体大小：粗体；
填充：6px 24px；
文字装饰：无；
文本阴影：0px-1px 0px#5b6178；
}
.myButton:悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#019ad2）、颜色停止（1，#33bdef））；
背景：-莫兹线性梯度（顶部，019ad2 5%，33bdef 100%）；
背景：-webkit线性梯度（顶部，019ad2 5%，33bdef 100%）；
背景：-o-线性梯度（顶部，019ad2 5%，33bdef 100%）；
背景：-ms线性梯度（顶部，019ad2 5%，33bdef 100%）；
背景：线性梯度（至底部，#019ad2 5%，#33bdef 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#019ad2'，endColorstr='#33bdef'，GradientType=0）；
背景色：#019ad2；
}
.myButton:活动{
位置：相对位置；
顶部：1px；
}
李树先生{
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
}

1。）如果这确实是一个html/css问题，您需要显示您的标记。2.）这听起来像是房主的问题，所以请发布您的尝试。我们不是来帮你做作业的