Django实现导航栏二级目录

Django实现导航栏二级目录

示意图

代码

css

.settings {
    position: absolute;
    left: -55px;
    display: none;
}

.settings>li {
    list-style-type: none;
    width: 80px;
    height: 45px;
    text-align: center;
    Line-height: 50px;
    background: white;
    border-bottom: 1px solid #e5e5e5;
}

#myMenu:hover>.settings {
    display: block;
}

.settings>li:hover {
    background-color: #e9e9e9;
}

.settings a {
    text-decoration: none;
}

html

<ul>
<li id="myMenu">
 <a href="/myPage">
     <img src="n.png">
 </a>
 <ul class="settings">
     <li><a href="/myPage">我的主页</a></li>
     <li><a href="#">我的消息</a></li>
     <li><a href="#">历史记录</a></li>
 </ul>
 </li>
</ul>