1 回答

TA貢獻2003條經驗 獲得超2個贊
如果閱讀您的 3000 行 css 代碼非常困難,但我為您做了一個工作示例。你可以在jsFiddle上找到它。
我認為您應該按如下方式構建“下拉”容器:
<ul class="dropdown">
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="usercp.php">Settings</a></li>
<li><a href="sys/logout.php">Logout</a></li>
</ul>
'li' 標簽應該放在上面的 'ul' 中。
整個“下拉”容器應放置在“主機下拉”內,該“主機下拉”打開和關閉“下拉”。因此,您可以調整“下拉”容器相對于“托管下拉”按鈕的位置。
<div id="dropdown" class="item hosting-dropdown">
<span>Account<i class="fa fa-caret-down"></i></span>
<ul class="dropdown">
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="usercp.php">Settings</a></li>
<li><a href="sys/logout.php">Logout</a></li>
</ul>
</div>
下拉打開和關閉可以用一個jQuery小函數來實現:
$('document').ready(function() {
$('#dropdown').click(function() {
$(this).toggleClass('opened');
})
})
和CSS:
.hosting-dropdown {
display: inline-block;
margin-left: 10px;
position: relative;
cursor: pointer;
}
.dropdown {
position: absolute;
right: 0;
top: 55px;
background-color: rgba(0, 0, 0, 0.4);
padding: 15px;
margin: 0;
display: none;
}
.hosting-dropdown.opened .dropdown {
display: block;
}
.dropdown li {
list-style: none;
padding: 5px 0;
}
.main-navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
float: left;
}
.content {
height: 2000px;
width: 100%;
background-color:#fff
}
#main-navigation .navigation-left {
padding: 27px 0;
}
#main-navigation .navigation-right{
padding: 35px 0;
}
如果您有任何問題,請與我聯系。
- 1 回答
- 0 關注
- 123 瀏覽
添加回答
舉報