侧栏多级菜单 - gstsyyb

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

li {
list-style: none;
}

.left-nav {
width: 100px;
background-color: #3385FF;
color: white;
font-size: 13px;
padding:1px;
}

.left-nav>ul>li {
width: 100px;
line-height: 20px;
text-align: center;
position: relative;
}

.left-nav>ul>li:HOVER {
background-color: navy;
cursor: pointer;
}

.left-nav>ul>li:HOVER>ul,.left-nav>ul>li:HOVER>h4>div {
display: block;
}

.left-nav>ul>li>ul {
display: none;
position: absolute;
top: 0px;
left: 101px;
color: black;
width: 100px;
background-color: #EAEAEA;
padding: 2px;
}

.arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid yellow;
float: left;
display: none;
}
</style>
</head>
<body>
<div class="left-nav">
<ul>
<li>
<h4><div class="arrow-right"></div>节点列表</h4>
<ul>
<li>node-102</li>
<li>node-103</li>
<li>node-104</li>
</ul>
</li>
<li>
<h4><div class="arrow-right"></div>报警记录</h4>
<ul>
<li>存活报警</li>
<li>指标报警</li>
</ul>
</li>
<li>
<h4><div class="arrow-right"></div>权限管理</h4>
<ul>
<li>超级权限</li>
<li>功能权限</li>
<li>数据权限</li>
</ul>
</li>
<li>
<h4><div class="arrow-right"></div>权限管理</h4>
<ul>
<li>超级权限</li>
<li>功能权限</li>
<li>数据权限</li>
</ul>
</li>
</ul>
</div>

</body>
</html>

==============================

<!DOCTYPE html>
<html>
<head>
  <title>Foundation ʵ��</title>
  <meta charset="utf-8">
  
  <style type="text/css">
  
      .main {
          padding: 10px;
          margin: 10px;
          height: 400px;
          background-color: gray;
      }
      
      .main p {
          width: 200px;
          background-color: blue;
          line-height: 40px;
          padding-left: 50px;
          cursor: pointer;
          padding-top: -20px;
          position: relative;
          color: white;
      }
      .main p:after {
          content: '';
          display: block;
          top: 0px;
          left: 250px;
          position: absolute;
          width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left:40px solid #3388FF;
        border-bottom: 20px solid transparent;
      }
      
      .main p:before {
          content: '';
          display: block;
          top: 0px;
          left: 0px;
          position: absolute;
          width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left:40px solid #3388FF;
        border-bottom: 20px solid transparent;
      }
  </style>
</head>

<body style="padding:20px;">

    <div class="main">
        <p>第</p>
        <p>第</p>
        <p>第</p>
    </div>
    
    <p class="arroe">11111</p>

</body>
</html>

posted on 2016-06-24 16:17 gstsyyb 阅读(231) 评论(0) 编辑收藏举报

刷新页面返回顶部

java程序员-http://www.it-ebooks.info/

公告