css - 下拉菜单 : Submenu name is below the menu bar and not within the nav box

Question

我编写了一个 css 下拉菜单，当我将鼠标悬停在“插图”一词上时，似乎无法让名称“LOGOS”留在绿色框中。我把这个词写成了 5em 这样我就可以看到它了。不能让它留在盒子里……无法控制它的位置。你能帮我吗？谢谢，

    <div id="nav-bar-sm-cont">

<ul id="sm-nav">


<li id="home"><a href="index.html" target="_self">HOME</a></li>

<li id="about"><a href="profile.html" target="_self">PROFILE</a></li>

<li id="illustration"><a href="illustration.html" target="_self">ILLUSTRATION</a>

<ul>

<li id="logos"><a href="logos.html" target="_self">LOGOS</a></li>

</ul>

</li>


<li id="billboards"><a href="artman-billboards.html" target="_self">BILLBOARDS</a></li>

<li id="six-mo"><a href="art_prize.html" target="_self">6 MO BREAKFAST</a></li>

<li id="cal"><a href="artshow.html" target="_self">ARTSHOW</a></li>

<li id="church"><a href="churchwork.html" target="_self">CHURCH</a></li>

<li id="contact"><a href="mailto:artman@artmangraphicdesign.com">CONTACT</a></li>

<li id="cat-ill"><a href="catillustration.html" target="_self">CAT ILLUSTRATION</a></li>

<li id="contact-cat"><a href="mailto:cat@bciwildblue.com">CONTACT CAT</a></li>



</ul>
</div>


<!--end nav bar sm container -->

        /* START small NAV bar **************************/

#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;



}

#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%; 
letter-spacing: 0.3em;
list-style-type: none;
float: left;

}


#sm-nav a:link{ text-decoration:none; 
color:silver;
background-color:transparent; 
padding: 5px 5px;



}


#sm-nav a:visited {text-decoration:none;
color: #9781B7; 
padding: 5px 5px;
background-color: transparent;
}

#sm-nav a:hover {text-decoration:none; 
color: #fff; 
background-color:#a7d6d5; 
 padding: 5px 5px;

}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;

}


/*start drop down************************************/

#sm-nav li ul { position:relative;
list-style-type: none;
display: none;



}

#sm-nav li:hover ul  { position: absolute;
background: green; 
padding: 5px 5px;
display:block;
 font-size: 5em;
width: 103px;
height: 10px;


}


/*end drop down*****************************************/




/* END small NAV BAR *****************************/

Answer 1

问题是您的 li 的 CSS 影响了父级 li 和子级。要解决这个问题，只需更改:

#sm-nav li {

到

#sm-nav > li {

现在 CSS 只会影响父级 li，您可以自由地为子级调整 CSS，就像这样:

#sm-nav li:hover ul li { }

JSFiddle