垂直二级列表和小箭头

最新推荐文章于 2021-07-01 11:21:32 发布

qqandpinecone

最新推荐文章于 2021-07-01 11:21:32 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： Html

本文链接：https://blog.youkuaiyun.com/Tjhfsghbjknjdy/article/details/88085556

Html 专栏收录该内容

4 篇文章

订阅专栏

<ul class="navMenu">
    <li><a href="personinfo.html" target="right"><img src="picture/person.png" width="16" height="16">&nbsp;&nbsp;我的账户</a></li>
    <li><a href="#" class="arrow"><img src="picture/late.png" width="20" height="20">&nbsp;&nbsp;考勤管理</a>
    <ul class="subMenu">
    <li><a href="AbsenceList.php" target="right">详细信息</a></li>
    <li><a href="welcome.php" target="right">结果统计</a></li>
    </ul>
    </li>
    <li><a href="studentList.html" target="right"><img src="picture/student.png" width="20" height="20">&nbsp;&nbsp;学生管理</a></li>
    <li><a href="classroomList.html" target="right"><img src="picture/house.png" width="18" height="18">&nbsp;&nbsp;教室管理</a></li>    
</ul>

	<div class="content">
		<div>
			 <iframe src="welcome.php" frameborder="0" width="1130" name="right" height="800" scrolling= "auto" ></iframe>
		</div>

.navMenu>li>a>img{
  margin-left: 30px;
}
.navMenu>li>a {
  display: block;
  line-height: 50px;
  font-size: 17px;
  text-decoration: none;
  color: #e3edf3;
  border-bottom: 1px solid #bcc3c0;
}
.navMenu>li.active>a,
.navMenu>li>a:hover,
.subMenu>li.active>a,
.subMenu>li>a:hover {
  color: #FFF;
  background: #516a7a;
}
.subMenu>li>a {
  display: block;
  line-height: 36px;
  font-size: 16px;
  text-decoration: none;
  color: #e3edf3;
}
ul.subMenu {
  margin-top: 8px;
  margin-left: 10px;
  padding-bottom: 5px;
}
.subMenu>li> a {
  padding-left: 20px;
}
a.arrow:after {
  display: inline-block;
  float: right;
  margin-right: 20px;
  margin-top: 18px;
  content: " ";
  height: 8px;
  width: 8px;
  border-width: 2px 2px 0 0;
  border-color: #e3edf3;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}
li.active>a.arrow:after {
    transform-origin: center;
    transform: rotate(135deg);
    transition: transform .2s;
}