个人中心
gpt4 book ai didi

html - 在图片上堆叠下拉菜单

转载 作者：行者123 更新时间：2023-11-28 08:29:53 25 4
gpt4 key购买 nike

我目前正在构建一个新网站，但我的下拉菜单出现了一些问题。正如您在屏幕截图中看到的那样 - 菜单的一部分位于图片/图像的后面，而不是在它的前面。我已经尝试了很多方法来让它工作，但没有任何运气。

我希望找到可以帮助我让它工作的人。

索引文件(DropDown.html):

<html>

<body>
  <img src="nnh-logo.gif" alt="nnh-logo" height="70" width="298">
</body>


<head>
  <title>Nielsen & Nielsen Holding</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
  </div>

  <ul class="dropdown">
    <li>
      <a href="#">Firmaer</a>
      <ul>
        <li><a href="http://nielsen-nielsen.dk/">Nielsen & Nielsen</a>
        </li>
        <li><a href="http://www.micro-matic.com/">Micro Matic A/S</a>
        </li>
        <li><a href="http://www.senmatic.dk/">Senmatic A/S</a>
        </li>
        <li><a href="http://www.nassau.dk/">Nassau A/S</a>
        </li>
        <li><a href="http://www.triax.dk/">Triax A/S</a>
        </li>
        <li><a href="http://www.triaxsystems.dk/">Triax Systems A/S</a>
        </li>
    </li>
    </ul>
    <li>
      <a href="http://www.micro-matic.dk/Jobs/job.htm">Jobs</a>
    </li>
    <li>
      <a href="http://www.micro-matic.dk/holding/images/Holding%20Profil%20Brochure.pdf">Group profile</a>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </div>
</body>


<body>
  <img src="trappe.jpg" style="position: absolute; top: 200px; left: 10px; alt=" trappe " height="300 " width="300 "> 
  </body>
</html>

样式文件(style.css):

/* CSS Tweaks */
* {padding:0;margin:0;}
a img {border:0;}
.clear {clear:both;}

body {font-family:Arial;font-size:12px;padding:20px;}

.info {padding:10px;background:#f1f1f1;border:1px dotted #ccc;margin-bottom:10px;}
.info strong {display:block;}

.dropdown {list-style:none;}
.dropdown li {list-style:none;position:relative;}
.dropdown li a {display:block;padding:0 10px;text-decoration:none;font-weight:bold;height:30px;line-height:30px;}

.dropdown > li {float:left;}
.dropdown > li > a {float:left;background:#333;color:#fff;border-left:1px solid #ccc;}
.dropdown > li > a:hover,.dropdown > li:hover > a {background:#666;}

.dropdown > li ul {display:none;}

.dropdown > li:hover > ul {display:block;width:211px;position:absolute;left:0;top:25px;}
.dropdown > li > ul > li > a {display:block;background:#444;color:#ccc;}
.dropdown > li > ul > li > a:hover,.dropdown > li ul > li:hover > a {background:#666;color:#fff;}

.dropdown > li ul > li:hover > ul {display:block;width:200px;position:absolute;left:200px;top:0; z-index: 9999;}
.dropdown > li > ul > li > ul > li a {display:block;background:#555;color:#ccc;}
.dropdown > li > ul > li > ul > li a:hover {background:#444;color:#fff;}

最佳答案

问题可能是图像在页面层次结构中稍后加载，因此它会覆盖在该图像之前加载的任何 DIV。

尝试使用 z-index。

将 z-index: -99 添加到 img 样式并将 z-index: 99 添加到 .dropdown 在你的 CSS 中。

关于html - 在图片上堆叠下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28323184/

25 4 0
文章推荐： javascript - 当我的幻灯片的一张特定图像显示时更改一个链接的颜色
文章推荐： c++ - 奥格/沃比斯 : _ov_fopen cannot be found
文章推荐： c++ - 在 QT 中通过应用程序边框显示弹出窗口小部件
文章推荐： jquery - 需要有关在鼠标悬停时滚动 ul 元素的帮助