Html 重叠<；li元素-CSS定制

我写这篇文章是关于我在为悬停导航栏及其选项卡下拉菜单选项进行css编码时遇到的一个问题。我的博客的链接如下：

我在悬停导航栏中有三个选项卡/页面，它们具有下拉菜单选项，当鼠标/光标悬停在相关文本上时会出现这些选项。然而，我遇到的问题是，当光标或鼠标悬停在其中一个选项卡/页面文本上时——在本例中，它们的标题为“Blankesque”、“Social”和“Features”——下拉菜单选项与选项卡/页面标题重叠。理想情况下，我希望下拉菜单选项出现在相关标题下方，而不是重叠和覆盖它们

我在下面介绍了html和css编码

#wctopdropcont{ /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;

z-index:100;
top:0px;
left:0px;
position:fixed;

background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
  }

#wctopdropnav{ /* social */
float: right;
width:97%;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;

}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}

#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a  {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;   
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li  a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 90px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white; 
}

#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#dptuh {
color: #000000;
text-transform: uppercase;
font-family: cantarell;
font-size: 16px!important;
display: block;
letter-spacing: 0.13em;
text-decoration: none;
margin: 0.9%;
  }
#dptuh a {
font-weight: bold;
  }
</style>
<div id='wctopdropcont'>
 <div id='wctopdropnav'>
     <ul>
       <li><a href='#'>Blankesque</a> 
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
         </ul></li>

<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>

         <ul>
              <li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
              <li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
           <li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
              <li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
              <li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
           <li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
           <li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
              <li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
           <li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
       </ul>
       </li>
<li><a href='http://www.blankesque.com/p/contact-blankesque-for-press.html'>Contact</a></li>
   </ul>

<div id='dptuh'>
<a href='http://www.blankesque.com'>Blankesque</a>
   </div>

</div></div>

#wctopdropcont{/*主条类别的宽度*/
宽度：100%；
高度：40px；
显示：块；
填充：0；
左边距：-16px；
z指数：100；
顶部：0px；
左：0px；
位置：固定；
背景：#ffffff；
不透明度：0.6；
过滤器：α（不透明度=60）；
}
#wctopdropnav{/*社交*/
浮动：对；
宽度：97%；
高度：7px；
显示：块；
填充：0；
左边距：30px；
}
#wctopdropnav ul{
浮动：对；
保证金：0；
填充：0；
}
#wctopdropnav li{
浮动：左；
列表样式：无；
线高：35px；
保证金：0；
填充：6.5px；/*单击条的高度*/
背景：#ffffff；
}
#wctopdropnav li a，#wctopdropnav li a:链接{
颜色：#000000；
浮动：对；
显示：块；
边际：0px；
文本转换：大写；
字体：11px cantarell！重要；
填充物：5px；
文字装饰：无；
字母间距：0.13em；
}
#wctopdropnav li a:悬停，#wctopdropnav li a:活动，#wctopdropnav.当前页面#项目a{
颜色：黑色；
字体大小：粗体；
填充物：5px；
背景：白色；/*旧浏览器*/
背景：白色；
背景：白色；
背景：白色；
背景：白色；
背景：白色；
背景：白色；
过滤器：黑色；
}
#wctopdropnav li li a，#wctopdropnav li li a:链接，#wctopdropnav li li a:已访问{
字体大小：11px；
背景：#ffffff；
颜色：#000000；
宽度：90px；
保证金：0；
填充：0px 1px；
线高：20px；
位置：相对位置；
}
#wctopdropnav li li a:悬停，#wctopdropnav li li a:活动{
颜色：黑色；
背景：白色；
背景：白色；
背景：白色；
背景：白色；
背景：白色；
背景：白色；
背景：白色；
过滤器：白色；
}
#wctopdropnav li ul{
z指数：9999；
位置：绝对位置；
左：-999em；
高度：自动；
宽度：170px；
边际：0px；
填充：0px
}
#wctopdropnav li:hover ul，#wctopdropnav li li li:hover ul，#wctopdropnav li li li:hover ul，#wctopdropnav li.sfhover ul，#topDropNav li li li li:{
左：自动
}
#wctopdropnav li:hover，#wctopdropnav li.sfhover{
位置：静态
}
#dptuh{
颜色：#000000；
文本转换：大写；
字体系列：cantarell；
字体大小：16px！重要；
显示：块；
字母间距：0.13em；
文字装饰：无；
利润率：0.9%；
}
#dptuh a{
字体大小：粗体；
}

对此问题的任何帮助都将不胜感激。先谢谢你

---

Iram

这应该可以做到：

#wctopdropnav li ul{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    margin:20px 0 0 0;
    padding:0px;
    }

---

你有没有试过用“top”来定位列表？使用top：（数量）em；不断增加价值，我会让你得到它需要的地方