Html 构建网页

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

下拉菜单乱七八糟。 下拉菜单位于图像后面。 悬停时，导航栏上的所有项目不会高亮显示

这方面我是新手，但我会尽我所能制作一个很酷的页面。请帮帮我

我给了

nav-ul
10的
z指数

希望这对名为-
#nav ul li的CSS样式有所帮助，将
左填充
和
右填充
更改为20 px

      * {
          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;
  }

2） 在名为
#nav ul li ul li
的CSS中，添加
宽度：130px类似

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

如果您面临任何问题，请尝试此操作。。请告诉我。
好的，在这里发布元素的堆栈顺序，即

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

在您的情况下，将其设置为“1”就足够了

我稍微修改了代码：

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

 <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>

      #nav ul {
         z-index: 1;
      }