重叠 <li 元素 - CSS 自定义

Question

我写的是关于悬停导航栏及其选项卡下拉菜单选项的 css 编码遇到的问题。 link我的博主博客如下：http://www.blankesque.com。

我在悬停导航栏中有三个 tabs/pages，它们具有当 mouse/cursor 悬停在相关文本上时出现的下拉菜单选项。然而，我遇到的问题是，当光标或鼠标悬停在 tabs/pages 文本之一上时 - 在这种情况下，它们的标题为 'Blankesque'、'Social' 和 'Features' -下拉菜单选项与 tabs/pages 标题重叠。理想情况下，我希望下拉菜单选项显示在相关标题下方，而不是重叠并覆盖它们。

我在下面包含了 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>

非常感谢对此问题的任何帮助。提前谢谢你。

伊拉姆

Answer 1

这应该可以解决问题：

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

重叠 <li 元素 - CSS 自定义

Overlapping <li elements - CSS customsing

html

css

blogger