Question

我编写了一个css下拉菜单，似乎无法获得名称＆＃34; LOGOS＆＃34;当我将鼠标悬停在“＃34;插图＆＃34;”上时，留在绿框内。我已经创造了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

下拉菜单：子菜单名称位于菜单栏下方，不在导航栏中

1 个答案: