gpt4 book ai didi

html - 使用 CSS 制作静态/粘性菜单栏

转载 作者:太空宇宙 更新时间:2023-11-04 10:39:58 27 4
gpt4 key购买 nike

即使读者向下滚动,我也试图让我的导航/菜单栏“粘贴”到页面顶部。我已经尝试了两个位置:固定;和 position: absolute;, 但它一直没有工作,我不确定为什么。我将包含以下代码:

CSS

 /* Navigation */

div.menu {
width:100%;
height:40px;
display:block;
position:fixed;
top:0;
right:0;
}
div.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-size: .8em;
position: absolute;
right: 0;
top: 0;
width: 40%;
}
div.menu li {
display: inline-block;
}
div.menu li a{
display: inline-block;
text-align: center;
padding: 1.5em;
}
div.menu li a:hover {
background-color: #6b9d68;
color: white;
}
div.menu li a.active {
background-color: #000000;
color: white;
}

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="cv.php">CV</a></li>
<li><a href="research.php">Research</a></li>
<li><a href="teaching.php">Teaching</a></li>
<li><a href="http://academia-25-to-life.blogspot.com">Blog</a></li>
</ul>
</div>

<div class="logo">
<img src="logo.jpg">
</div>

<div class="divider">
<img src="divider.jpg">
</div>
</head>
</html>

最佳答案

你是在行内还是在两个单独的文件中声明它?如果是后者,则您缺少样式表引用。

此外,<nav> 的用法为清楚起见,建议标记 - http://html5doctor.com/nav-element/

关于html - 使用 CSS 制作静态/粘性菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35880645/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com