Question

      <!doctype html>
  <html>
  <head>
  <title>My web page</title>
  <link href="mycss.css" rel="stylesheet" type="text/css">
  <h1>Welcome to my page!</h1>
  <body>
  <nav id="nav">
  <ul>

  <li>Home</li>

  <li><a href="">About Me!</a>
  <ul>
  <li><a href="">Me!</a></li>
  <li><a href="">Hobbies!</a></li>
  <li><a href="">My Photography!</a></li>
  <li><a href="">Favorite Music!</a></li>
  </ul>
  </li>

  <li><a href="">Important Links</a>
  <ul>
  <li><a href="">L1</a></li>
  <li><a href="">L2</a></li>
  <li><a href="">L3</a></li>
  <li><a href="">L4</a></li>
  </ul>
  </li>

  <li><a href="">Contact</a></li>

  </ul>
  </nav>
      <img src="http://http://upload.wikimedia.org/wikipedia/commons/a/a8/Sydney_harbour_bridge_new_south_wales.jpg" width="700" height="400"  alt=""/>
  <p>About Me</p>
  <p>About Me</p>
  </body>
  </html>

CSS文件......

      * {
          text-align:center;
  }

  h1 {
  }

  nav {
      display: block;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      color: #202020;
      list-style-type: none;
  }

  p {
      display: block;
      text-align: center;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      color: 202020;
      position: relative;
  }

  img {
  position: relative;
  top: -5px;
  }


  #nav ul li {
      display: inline-block;
      list-style-type: none;
      float: none;
      padding-top: 5px;
      background-color: #ACFE89;
      padding-left: 30px;
      padding-right: 30px;
      position: relative;
      padding-bottom: 5px;
      color: #333366;
  }

  #nav ul li:hover {
      color: #0099FF;
  }
  #nav ul li ul{
        display:none;
      position: absolute;
      left: 0;
      top: 100%;
  }
  #nav ul li ul li{


      }
  #nav ul li:hover > ul {
      display:block;
  }
  a {
      text-decoration: none;
  }

http://jsfiddle.net/txZ5K/3/

嗨，我这个页面遇到了一些问题...

下拉菜单搞砸了。下拉菜单已在图像后面消失。导航栏上的所有项目在悬停时都不会突出显示。

我是新手，但我尽力做出一个很酷的页面。请帮助我！

Answer 1

http://jsfiddle.net/t2XfH/

我给了z-index 10到#nav ul

希望这会有所帮助

Answer 2

1）在名为 - #nav ul li的CSS样式中，将padding-left和padding-right更改为20 px。

padding-left: 20px;
padding-right: 20px;

2）在名为#nav ul li ul li的CSS中，添加width:130px;，如

#nav ul li ul li {
  width:130px;
}

试试这个＆amp;如果你遇到任何问题，我知道......

Answer 3

好吧，在这里发出元素的堆栈顺序，例如，

 <img src="http://http://upload.wikimedia.org/wikipedia/commons
   /a/a8/Sydney_harbour_bridge_new_south_wales.jpg" width="700" height="400"  alt=""/>
     <p>About Me</p>
     <p>About Me</p>

位于堆栈中的下拉菜单之前。因此，为下拉列表指定z-index会有所帮助， z-index属性指定元素的堆栈顺序，具有更大堆栈顺序的元素始终位于堆栈顺序较低的元素前面。

      #nav ul {
         z-index: 1;
      }

在你的情况下设置'1'就足够了。

我稍微更改了代码：jsfiddle

建立网页

3 个答案: