CSS 下拉菜单总是在旁边(不是底部)-6ren

CSS 下拉菜单总是在旁边(不是底部)

转载作者：行者123 更新时间：2023-11-28 15:55:28

30

4

我正在尝试创建一个简单的下拉菜单，但无论我做什么，单击时我的“下拉菜单”总是直接出现在按钮的侧面(而不是底部):(

我已将相关代码添加到 fiddle 中，但似乎根本无法让下拉菜单显示在那里。我正在尝试让下拉菜单立即显示在“block5”元素下方(并与“dropDown”按钮对齐)。任何帮助将不胜感激。 https://jsfiddle.net/k6azhptd/4/

<body>
    <div id="header"> 

       <div id="block2"><a href="stuff/">Browse</a></div>
       <div id="block3"><a href="stuff/">Post</a></div>
       <div id="block4"><a href="stuff/">Search</a></div>
       <div id="block5">
       <span>Logged in as </span><div class='dropDown' onClick='myFunction();'>userName▾</div>

          <div id="userDrop" class="dropContent">
             <span>User Page</span>
          </div>
       </div>
    </div>



#header {
min-width: 1290px;
background-color: #CC0000;
color: #FFFFFF;
height: 80px;
font-family: sans-serif; 
font-size: 1.1em;
}
#header a {
color: #FFF;
text-decoration: none;
}
#block1 {
margin-left: 50px;
display: inline-block;
height: 100%;
}
#block2 {
display: inline-block;
vertical-align: top;
width: 180px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block2:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block2 a {
position: relative;
top: 40px;
}
#block3 {
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block3:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block3 a {
position: relative;
top: 40px;
}
#block4 {
display: inline-block;
vertical-align: top;
width: 120px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block4:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block4 a {
position: relative;
top: 40px;
}
#block5 {
display: inline-block;
position:relative;
margin-left: 50px;
vertical-align: top;
width: 250px;
height: 100%;
text-align: right;
background-color: #444;
}
#block5 span {
position: relative;
top: 40px;
} 
.dropDown {
position: relative;
top: 40px;
display: inline-block;
color: #ff9900;
font-weight: bold;
text-decoration: none;
}
.dropContent {
display: none;
position: absolute;
width: 200px;
background-color: #CCC;
color: #000;
z-index: 10;
}

.show {display:block;}

最佳答案

检查这个片段

function myFunction() {
  document.getElementById("userDrop").classList.toggle("show");
};

#header {
  min-width: 1290px;
  background-color: #CC0000;
  color: #FFFFFF;
  height: 80px;
  font-family: sans-serif;
  font-size: 1.1em;
  display: flex;
}
#header a {
  color: #FFF;
  text-decoration: none;
}
#header div {
  height: 100%;
  text-align: center;
  flex: 1;
}
#block1 {
  margin-left: 50px;
  height: 100%;
}
#block2 {
  vertical-align: top;
  width: 180px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #C00;
  border-right: 1px solid #C00;
}
#block2:hover {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  background-color: #900;
}
#block2 a {
  position: relative;
  top: 40px;
}
#block3 {
  vertical-align: top;
  width: 200px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #C00;
  border-right: 1px solid #C00;
}
#block3:hover {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  background-color: #900;
}
#block3 a {
  position: relative;
  top: 40px;
}
#block4 {
  vertical-align: top;
  width: 120px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #C00;
  border-right: 1px solid #C00;
}
#block4:hover {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  background-color: #900;
}
#block4 a {
  position: relative;
  top: 40px;
}
#block5 {
  background-color: #444;
  position: relative;
  margin-left: 50px;
  vertical-align: top;
  width: 250px;
  height: 100%;
  text-align: right;
}
#block5 span {
  position: relative;
  top: 40px;
}
.dropContent {
  display: none;
  position: absolute;
  top: 85px;
  width: 200px;
  background-color: #CCC;
  color: #000;
}
.dropDown {
  position: relative;
  top: 40px;
  display: inline-block;
  color: #ff9900;
  font-weight: bold;
  text-decoration: none;
}
.dropContent {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #CCC;
  color: #000;
  z-index: 10;
}
.show {
  display: block;
}

<body>
  <div id="header">

    <div id="block2"><a href="stuff/">Browse</a>
    </div>
    <div id="block3"><a href="stuff/">Post</a>
    </div>
    <div id="block4"><a href="stuff/">Search</a>
    </div>
    <div id="block5">
      <span>Logged in as </span>
      <div class='dropDown' onClick='myFunction();'>userName▾</div>

      <div id="userDrop" class="dropContent">
        <span>User Page</span>
      </div>
    </div>
  </div>

PS:全屏查看希望这有帮助

关于CSS 下拉菜单总是在旁边(不是底部)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41213443/

30

4

0

文章推荐： javascript - 使用 jquery 将图像替换为文本

文章推荐： java - 奇怪的 Java 替换优先

java - 为什么 double 总是 8 个字节，而 int 总是 4 个字节，即使 int 有更多位数？
我不明白 int 63823 为何比 double 1.0 占用更少的空间。在这个特定实例中，int 中是否没有存储更多信息？最佳答案 I don't understand how an int 6
ios - (总是)在使用加密来验证用户身份时向美国当局报告？
这可能不是一个直接的代码问题，但它是一个经常出现在 SO 上的问题，我发现阅读它非常有用。 App Store - Help answering “Missing Compliance” (using
css - 如何在下拉框顶部显示下拉列表(总是)
我在我们的应用程序中使用 syncfusion 寻呼机和下拉列表请打开以下链接。 https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2
c++ - *新总是错的。总是
以便解释指针和引用in this question我写了这段代码。 MyClass& MyClass::MyInstance() { static MyClass & myLoca
c++ - 协助避免断言......总是!
在 C 和 C++ 中，assert 是一个非常重量级例程，将错误写入 stdout 并终止程序。在我们的应用程序中，我们实现了一个更强大的 assert 替代品，并为其提供了自己的宏。已尽一切努力
c# - 此请求的授权已被拒绝。总是
我已经创建了一个 MVC webApi 项目，现在我想使用身份验证和授权。我想我已经实现了这种安全措施，但由于某种原因，有些事情变糟了，当我编写我的凭据并尝试调用一些 webApi 方法时，显示消息“
javascript - 向函数添加回调 - 总是
我发现自己使用一种奇怪的方式向我的函数添加回调函数，我想知道是否有更通用的方式向函数添加回调函数，最好的情况是我的所有函数都检查最后给定的作为函数的参数，如果是，则将其用作回调。我以前是这样的: v
git - 总是 `git fetch --all` ？
几乎从来没有我只想获取某个 Remote 的情况；我总是想要所有的 Remote 。我认为这将是一个足够常见的用例，git 会考虑它(与他们有 pull.rebase true 的方式相同)。那么，
jQuery .inArray() 总是 true？
我正在尝试使用 inarray 但它总是返回 true？有任何想法吗？ (所有 li 均已显示) $("#select-by-color-list li").hide(); // get the se
lighttpd mod_secdownload 总是 404
我正在尝试为我公司的开发环境设置过期网址。我们使用 lighttpd在此环境中提供上传的文件，我发现 these docs这似乎相当有希望。问题是我似乎根本无法让它工作，而且我有点不知所措，试图找出
Grails 外部配置。无法访问外部变量。总是[:]
我无法让“文件夹”外部变量工作。我总是得到[:]。我正在 Windows 下的 Grails 上进行开发(这就是为什么外部配置文件看起来像 file:C:\path\to/file)。我在另一个项
haskell - `if-then-else`(总是)可以被函数调用替换吗？
这个问题是出于对 PL 如何工作的好奇，而不是其他任何事情。 (它实际上是在查看与 Haskell 不同的 SML 时想到的，因为前者使用按值调用 - 但我的问题是关于 Haskell。) Haske
verilog - 总是 block 中的for循环
我有一个高速缓存内存模块，我希望它是可字寻址的，但有字节的写使能信号。 always @ (posedge clk) begin //stuff... if(write) begin
java - 匿名类*总是*维护对其封闭实例的引用吗？
我正在处理一些代码，其中一个对象“foo”正在创建另一个对象对象“bar”，并向其传递一个Callable。之后 foo 将返回bar，然后我希望 foo 变得无法访问(即:可用于垃圾收集)。我最初
C# 总是 0 个参数
我已将我的程序与此方法相关联: public static void CreateFileAssociation(string extension, string key, string descri
C opendir 总是 NULL
所以我正在进行目录遍历，但我无法让 opendir 按照我想要的方式工作。它总是无法打开我发送的目录，它给出了一些未知的错误。我通常传入 argv[1]，但我放弃了，只是开始硬编码路径。 char *
java - 从不运行 `if` ，总是 `else`
这个问题在这里已经有了答案: How do I compare strings in Java? (23 个回答) 关闭 9 年前。出于某种原因，我的(基本)程序总是打印我为 else 语句保留的
python - 如何将(总是)时间四舍五入到最接近的十位？
我不想冒为此提出破解的风险，因为它涉及 datetime 对象。基本上，我想按如下方式进行转换: 2010-04-21 06:37:53 -> 2010-04-21 06:40:00 2010-08-
C: fgets 总是 NULL
我正在用 C 语言玩文件 I/O。我正在尝试使用 fgets 从一个文件中读取数据并将其输出到另一个文件。问题是它总是返回 NULL，因此没有任何内容被复制到输出文件中。这是我的代码: #includ
C++:不删除对象/总是/内存泄漏吗？
class MyClass { // empty class with no base class }; int main() { MyClass* myClass = new MyC

首页

博学

6Ren·AI

商城

CSS 下拉菜单总是在旁边(不是底部)