当我激活下拉菜单时的黑色空间

当我激活下拉菜单（通过悬停）时，子菜单右侧有一些黑色空间。我尝试了很多东西，似乎无法找到我必须改变的元素以摆脱它。请帮助我，当在小提琴网站上增加宽度时，问题就会变得更加明显。我根本不需要任何空间，我希望子菜单能够适应从它丢失的菜单的大小。当我激活下拉菜单时的黑色空间

HTML：

<body> 

    <header id = "M_head"> 
      <img id="M_logo" src="MircLogo.png"> 
      <img id="M_logo2" src="MircLogo.png"> 
      <h2><ul>Mc</ul></h2>  

    </header> 
     <div id="container"> 

      <nav id="M_nav"> 
       <ul> 
        <li>NEWS 
         <ul> 
          <li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li> 
         </ul> 
        </li> 
        <li>STORE 
         <ul> 
          <li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li> 
         </ul> 
        </li>  
        <li>BLOG</li> 
        <li>CONTACTS</li> 
        <li>ABOUT</li> 


       </ul> 

      </nav> 

      <section id="M_section"> 
      <div id=Side_sec></div> 
      <div id="Side_sec2"></div> 
      </section> 

      <footer id="M_footer"> 

      </footer> 
     </div> 

    </body>

CSS：

*{box-sizing:border-box;} 

body{ 
    max-width:100%; 
    margin:0px; 
    display:block; 

} 


#container{ 
    padding:0; 
    text-align:center; 
    box-sizing:border-box; 
    margin: 0px auto; 
    margin-top:-.5em; 
    background-image:url("MircBackground.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat:no-repeat; 


} 
#M_logo{ 
    margin:-25px; 
    float:left; 
    height:5em; 
    width:8%; 
    margin-left:-1.825em; 
} 
#M_logo2{ 
    margin-top:-25px; 
    float:right; 
    height:5em; 
    width:8%; 
    margin-right:-1.825em; 
} 
#M_head{ 
    margin:0px auto; 
    color:black; 
    width:90%; 
    background-color:white; 
    height:4em; 
} 

#M_head ul{ 
    padding:0px auto !important; 
    margin: 0px; 
    margin-left:5em; 
    text-align:left; 
    font-style:italic; 
    font-weight:bold; 
    width:30%; 
    letter-spacing:-0.08em; 
    word-spacing:-0.03em; 
} 




#M_nav ul { 
    width:102.5%; 
    padding:0px; 
    padding-top:.25em; 
    padding-bottom:.25em; 
    margin-left:-2.6%; 
    margin-top:0em; 
    background-color:black; 
    display:inline-table; 
} 


#M_nav ul li{ 
    display:inline-block; 
    list-style-type:none; 
    text-decoration:none; 
    text-align:center; 
    padding-left:3.5em; 
    padding-right:3.5em; 
    padding-top:0.35em; 
    padding-bottom:0.35em; 
    display:inline-block; 
    border-radius:0.25em; 
    color:white; 
    font-weight:bold; 
    background-color:black; 
} 


#M_nav ul li:hover{ 
    background-color:#FFBF00; 
    color:white; 
    font-shadow:none; 
    z-index:100; 
} 

#M_nav ul ul{ 
    display:none; 
} 

#M_nav ul li:hover >ul{ 
    display:block; 
    width:20%; 
    position:absolute; 
    margin-top:.7em; 
    float:center; 
} 
#M_nav ul li:hover ul >li{ 
    display:block; 
     width:60%; 
} 

#Side_sec{ 
    height:50em; 
    width:15%; 
    border-left:2px solid white; 
    float:right; 
} 

#M_section{ 
    height:50em; 
    width:80%; 
    margin:-1em auto; 
    border:2px solid white; 
}

小提琴链接：http://jsfiddle.net/ft9b6np9/

来源

2015-10-25 Jayden Freh

小提琴链接：??? –

哦，对不起，完全忘了它 –

'li'标签设置为只有60％的宽度，因为你有'背景颜色：黑色''它显示在链接旁边的'ul'元素。至少这是我想你想的。 – Hoshts

变化：

#M_nav ul li:hover ul >li{ 
    display:block; 
    width:60%; 
}

到：

#M_nav ul li:hover ul >li{ 
    display:block; 
}

设置百分比宽度会导致右侧出现黑色溢出。

小提琴：http://jsfiddle.net/ft9b6np9/1/

来源

2015-10-25 19:19:48

工作感谢。我非常专注于试图让它响应，我认为在某些情况下，百分比不会很差。 –

当然。你仍然可以使用一个百分比，但是如果你这样做的话，你也必须应用'margin：0 auto;'来居中。无论如何，如果这提供了合理的答案，请选择答案旁边的绿色复选框将其标记为已接受。 –

当我激活下拉菜单时的黑色空间

回答

相关问题