首页 文章

重叠<li elements - CSS海关

提问于
浏览
0

我已经遇到了悬停导航栏及其标签下拉菜单选项的css编码 . 我博客博客的链接如下:http://www.blankesque.com .

我在悬停导航栏中有三个选项卡/页面,当鼠标/光标悬停在相关文本上时会显示下拉菜单选项 . 然而,我遇到的问题是,当光标或鼠标悬停在其中一个标签/页面文本上时 - 在这种情况下,它们的 Headers 为“Blankesque”,“社交”和“功能” - 下拉菜单选项与标签重叠/页面 Headers . 理想情况下,我希望下拉菜单选项显示在相关 Headers 下方,而不是重叠并覆盖它们 .

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

任何有关此问题的帮助将不胜感激 . 先感谢您 .

IRAM

1 回答

  • 2

    这应该做的伎俩:

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

相关问题