Stacking a dropdown menu over a picture

2019-09-09 22:53发布

站内问答 / HTML/CSS
1407 1 6

I'm currently building a new website, and i'm having some problems with my drop-down menu. As you can see on the screenshot - a part of the menu goes behind the picture/image, instead of being in front of it. I have tried a lot of things to get this to work, but without any luck.

I hope to find someone who can help me with getting it to work.

Index file (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 file (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;}

1条回答
SAY GOODBYE
2楼-- · 2019-09-09 23:36

The problem is probably that the image gets loaded later in the hierarchy of the page and it therefore gets overlays whatever DIV is loaded before that one.

Try playing with the z-index.

Add z-index: -99 to the img-style and add z-index: 99 to the .dropdown in your css.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)