html - 下拉菜单使用 CSS 离开屏幕
问题描述
在带有下拉菜单(无 Bootstrap)的网站上工作。
下拉菜单超出屏幕时出现问题。查找了一些有类似问题的人,他们建议使用右/左属性,但我似乎无法让它工作。
这个想法是当用户单击 fa-language 元素时,让 div 中的两个 lis 作为下拉菜单出现。有什么建议么?
谢谢
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
font-family: 'Cabin Condensed', sans-serif;
}
a {
text-decoration: none;
color: #B0BDC9;
}
#navbar {
padding: 1.25%;
background: #2F3236;
font-family: 'Fjalla One', sans-serif;
}
#navbar li {
display: inline;
padding: 15px;
}
.navbar-right {
float: right;
color: #B0BDC9;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown-container {
display: none;
position: absolute;
color: #B0BDC9;
background-color: #2F3236;
min-width: 160px;
z-index: 1;
}
.dropdown-container ul {
display: block;
left: auto;
right: 0;
margin-right: -10px;
}
.dropdown-container ul li {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
left: auto;
right: ;
}
.dropdown:hover .dropdown-container {
display: block;
}
.content {
margin: 0 auto;
margin-top: 75px;
width: 80%;
font-size: 1.2em;
color: #2F3236;
}
<link rel="stylesheet" type="text/css" href="personal_website.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="navbar">
<li><a href="home.html">Home</a></li>
<li><a href="about_me.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact.html">Contact</a></li>
<div class="navbar-right">
<li><a href="" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<div class="dropdown">
<li><a href=""><i class="fas fa-language"></i></a></li>
<div class="dropdown-container">
<ul>
<li>English</li>
<li>Spanish</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<h2 class="home-text">Text</h2>
</div>
解决方案
enter code here
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
font-family: 'Cabin Condensed', sans-serif;
}
a {
text-decoration: none;
color: #B0BDC9;
}
#navbar {
padding: 1.25%;
background: #2F3236;
font-family: 'Fjalla One', sans-serif;
}
#navbar li {
display: inline;
padding: 15px;
}
.navbar-right {
float: right;
color: #B0BDC9;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown-container {
display: none;
position: absolute;
top: 36px;
right: 4px;
text-align: center;
color: #B0BDC9;
background-color: #2F3236;
min-width: 110px;
z-index: 1;
}
.dropdown-container ul {
display: block;
left: auto;
right: 0;
margin-right: -10px;
width: 100px;
padding: 0px;
}
.dropdown-container ul li {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
left: auto;
right: ;
}
.dropdown:hover .dropdown-container {
display: block;
}
.content {
margin: 0 auto;
margin-top: 75px;
width: 80%;
font-size: 1.2em;
color: #2F3236;
}
<link rel="stylesheet" type="text/css" href="personal_website.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="navbar">
<li><a href="home.html">Home</a></li>
<li><a href="about_me.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact.html">Contact</a></li>
<div class="navbar-right">
<li><a href="" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<div class="dropdown">
<li><a href=""><i class="fas fa-language"></i></a></li>
<div class="dropdown-container">
<ul>
<li>English</li>
<li>Spanish</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<h2 class="home-text">Text</h2>
</div>
推荐阅读
- tensorflow - 张量的值正在发生变化
- php - mpdf unicode 以白色输出文本(不可见)
- c++ - 如何从 txt 文件 c++ 中提取括号之间的数字?
- android - RecyclerView SnapHelper 找到被捕捉项目的确切位置
- java - (Java) 判断一个特定数字是否在 ArrayList 中出现两次
- circleci - 提交不会触发circleci中的构建
- assembly - x86 汇编器对存储在寄存器中的布尔值进行分支
- linux - 如何在 Linux 上部署使用 Create-react-app 构建的 ReactJS 应用程序?
- css - 无法使用 css 更改背景颜色
- java - itext7 - 如何在写入期间过滤渲染事件