如何使用嵌套子菜单CSS制作菜单栏

Question

我想制作一个具有不同背景颜色的菜单，同时具有一个具有不同背景颜色的子菜单和一个嵌套子菜单。 当我将鼠标悬停在子菜单列表上时，它应该显示嵌套子菜单。该怎么办？ 。 这是我的代码。

    <html> <head> <title>Example of HTML Menu</title> 
<style type="text/css" media="screen"> 


#horizontalmenu ul { 
padding:1; margin:1; list-style:none; 
} 


#horizontalmenu li 
{ 
float:left; 
position:relative; 
padding-right:100; 
display:block; 
border:4px solid #CC55FF; 
border-style:inset; 

} 
#horizontal li 
{ 
float:left; 
position:relative; 
padding-right:100; 
display:block; 
border:4px solid pink; 
border-style:inset; 

} 


#horizontalmenu li ul 
{ 
display:none; 
position:absolute; 

} 

#horizontalmenu ul li:hover > ul {
        display: block;
    }
#horizontalmenu li:hover ul
{ 
display:block; 
background:red; 
height:auto; 
width:8em; 
background-color: green;
} 


#horizontalmenu ul ul ul{ 
clear:both; border-style:none;
left:100%;

} 




</style>
 </head> 
 <body> 
 <div id="horizontalmenu"> 

 <ul> 
 <li>
 <a href="#">News</a> 
 <ul> 
 <li>
 <a href="#">National</a></li> 
 <li>
 <a href="#">International</a></li> 
 <li><a href="#">Sport</a></li> 
 <li><a href="#">Hollybood</a></li> </ul> </li> 

 <li> <a href="#">Technology</a> 
 <ul> <li><a href="#">IT/Software</a></li> 
 <li><a href="#">Hardware</a></li> 
 <li><a href="#">Iphone</a>
 <ul class="horizontal"><li><a href="#">IT/Software</a></li> </ul></li> 

 <li><a href="#">Neuro-Science</a></li> </ul> </li> 

 <li> <a href="#">Sports</a> 
 <ul> <li><a href="#">Cricket</a></li> 
 <li><a href="#">Tenis</a></li> 
 <li><a href="#">Badminton</a></li> 
 <li><a href="#">Hockey</a></li> </ul> </li> 

 <li> <a href="#">Country</a> 
 <ul> <li><a href="#">India</a></li> 
 <li><a href="#">America</a></li> 
 <li><a href="#">France</a></li> 

 </ul>
 </li>
 </ul> 
 </div> 
 </body> 
 </html>

 #horizontalmenu ul { padding:1; margin:1; list-style:none; } #horizontalmenu li { float:left; position:relative; padding-right:100; display:block; border:4px solid #CC55FF; border-style:inset; } #horizontal li { float:left; position:relative; padding-right:100; display:block; border:4px solid pink; border-style:inset; } #horizontalmenu li ul { display:none; position:absolute; } #horizontalmenu ul li:hover > ul { display: block; } #horizontalmenu li:hover ul { display:block; background:red; height:auto; width:8em; background-color: green; } #horizontalmenu ul ul ul{ clear:both; border-style:none; left:100%; } 

  <div id="horizontalmenu"> <ul> <li> <a href="#">News</a> <ul> <li> <a href="#">National</a></li> <li> <a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul> </li> <li> <a href="#">Technology</a> <ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a> <ul class="horizontal"><li><a href="#">IT/Software</a></li> </ul></li> <li><a href="#">Neuro-Science</a></li> </ul> </li> <li> <a href="#">Sports</a> <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul> </li> <li> <a href="#">Country</a> <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> </ul> </li> </ul> </div> 

Answer 1

我添加了其他样式。 希望对你有帮助

 #horizontalmenu ul { padding:1; margin:1; list-style:none; } #horizontalmenu li { float:left; position:relative; padding-right:100; display:block; border:4px solid #CC55FF; border-style:inset; } #horizontal li { float:left; position:relative; padding-right:100; display:block; border:4px solid pink; border-style:inset; } #horizontalmenu li ul { display:none; position:absolute; } #horizontalmenu ul li:hover > ul { display: block; } #horizontalmenu li:hover ul { display:block; background:red; height:auto; width:8em; background-color: green; } #horizontalmenu ul ul ul{ clear:both; border-style:none; left:100%; } #horizontalmenu li ul.horizontal { display: none; } #horizontalmenu #horizontalmenu li:hover ul.horizontal { display: block; } 

 <div id="horizontalmenu"> <ul> <li> <a href="#">News</a> <ul> <li> <a href="#">National</a></li> <li> <a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul> </li> <li> <a href="#">Technology</a> <ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a> <ul class="horizontal"><li><a href="#">IT/Software</a></li><li><a href="#">IT/Software 2</a></li> </ul></li> <li><a href="#">Neuro-Science</a></li> </ul> </li> <li> <a href="#">Sports</a> <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul> </li> <li> <a href="#">Country</a> <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> </ul> </li> </ul> </div> 

Answer 2

在这里，我已经为您要实现的菜单应用/修复了您的代码。 您可以轻松更改背景颜色和字体颜色。 祝您工作顺利。

 #horizontalmenu ul { list-style: none; padding: 0; } #horizontalmenu > ul:after{ clear:both; content:""; display:block; } #horizontalmenu > ul > li { float: left; position: relative; border: 1px solid #CC55FF; } #horizontalmenu > ul > li > a { text-decoration: none; padding: 5px 10px; display:block; color: black; } #horizontalmenu > ul > li > a:hover { background-color: lightgreen; } #horizontalmenu > ul > li > ul { background-color:red; display: none; width:150px; top:100%; left:0; position: absolute; } #horizontalmenu > ul > li > ul > li { position: relative; width:100%; display: block; } #horizontalmenu > ul > li > ul > li > a { text-decoration: none; padding: 5px 10px; display:block; color: black; } #horizontalmenu > ul > li > ul > li > a:hover { background-color:white; } #horizontalmenu > ul > li:hover > ul { display: block; } #horizontalmenu > ul > li > ul > li > ul { display:none; background-color:lightblue; position:absolute; left:100%; top:0; width: 150px; background-color: green; } #horizontalmenu > ul > li > ul > li > ul > li > a { text-decoration: none; padding: 5px 10px; display:block; color: black; } #horizontalmenu > ul > li > ul > li > ul > li > a:hover { background-color:yellow; } #horizontalmenu > ul > li > ul > li:hover ul { display: block; } 

 <div id="horizontalmenu"> <ul> <li> <a href="#">News</a> <ul> <li> <a href="#">National</a> </li> <li> <a href="#">International</a> </li> <li> <a href="#">Sport</a> </li> <li> <a href="#">Hollybood</a> </li> </ul> </li> <li> <a href="#">Technology</a> <ul> <li> <a href="#">IT/Software</a> </li> <li> <a href="#">Hardware</a> </li> <li> <a href="#">Iphone</a> <ul class="horizontal"> <li> <a href="#">IT/Software</a> </li> </ul> </li> <li> <a href="#">Neuro-Science</a> </li> </ul> </li> <li> <a href="#">Sports</a> <ul> <li> <a href="#">Cricket</a> </li> <li> <a href="#">Tenis</a> </li> <li> <a href="#">Badminton</a> </li> <li> <a href="#">Hockey</a> </li> </ul> </li> <li> <a href="#">Country</a> <ul> <li> <a href="#">India</a> </li> <li> <a href="#">America</a> </li> <li> <a href="#">France</a> </li> </ul> </li> </ul> </div>