Html 如何使用嵌套的子菜单css制作菜单栏_Html_Css

Html 如何使用嵌套的子菜单css制作菜单栏

html css

Html 如何使用嵌套的子菜单css制作菜单栏,html,css,Html,Css,我想做一个不同背景颜色的菜单，有一个子菜单和一个嵌套的子菜单，两者都有不同的背景颜色。当我将鼠标悬停在子菜单列表上时，它应该显示嵌套的子菜单。如何操作。这是我的密码 <html> <head> <title>Example of HTML Menu</title> <style type="text/css" media="screen"> #horizontalmenu ul { padding:1; margin:

我想做一个不同背景颜色的菜单，有一个子菜单和一个嵌套的子菜单，两者都有不同的背景颜色。当我将鼠标悬停在子菜单列表上时，它应该显示嵌套的子菜单。如何操作。这是我的密码

    <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>

我添加了其他样式。希望能有所帮助

#水平菜单ul{
填充：1；边距：1；列表样式：无；
} 
#水平菜单李
{ 
浮动：左；
位置：相对位置；
右：100；
显示：块；
边框：4px实心#CC55FF；
边框样式：插图；
} 
#水平力
{ 
浮动：左；
位置：相对位置；
右：100；
显示：块；
边框：4倍纯红；
边框样式：插图；
} 
#水平菜单
{ 
显示：无；
位置：绝对位置；
} 
#水平菜单ul li：悬停>ul{
显示：块；
}
#水平菜单li：悬停ul
{ 
显示：块；
背景：红色；
高度：自动；
宽度：8em；
背景颜色：绿色；
} 
#水平菜单ul{
清除：两者；边框样式：无；
左：100%；
}
#水平菜单水平菜单{
显示：无；
}
#水平菜单#水平菜单li：将鼠标悬停在水平位置{
显示：块；
}

我添加了其他样式。希望能有所帮助

#水平菜单ul{
填充：1；边距：1；列表样式：无；
} 
#水平菜单李
{ 
浮动：左；
位置：相对位置；
右：100；
显示：块；
边框：4px实心#CC55FF；
边框样式：插图；
} 
#水平力
{ 
浮动：左；
位置：相对位置；
右：100；
显示：块；
边框：4倍纯红；
边框样式：插图；
} 
#水平菜单
{ 
显示：无；
位置：绝对位置；
} 
#水平菜单ul li：悬停>ul{
显示：块；
}
#水平菜单li：悬停ul
{ 
显示：块；
背景：红色；
高度：自动；
宽度：8em；
背景颜色：绿色；
} 
#水平菜单ul{
清除：两者；边框样式：无；
左：100%；
}
#水平菜单水平菜单{
显示：无；
}
#水平菜单#水平菜单li：将鼠标悬停在水平位置{
显示：块；
}

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

#水平菜单{
列表样式：无；
填充：0；
}
#水平菜单>ul:之后{
明确：两者皆有；
内容：“；
显示：块；
}
#水平菜单>ul>li{
浮动：左；
位置：相对位置；
边框：1px实心#CC55FF；
}
#水平菜单>ul>li>a{
文字装饰：无；
填充物：5px10px；
显示：块；
颜色：黑色；
}
#水平菜单>ul>li>a:悬停{
背景颜色：浅绿色；
}
#水平菜单>ul>li>ul{
背景色：红色；
显示：无；
宽度：150px；
最高：100%；
左：0；
位置：绝对位置；
}
#水平菜单>ul>li>ul>li{
位置：相对位置；
宽度：100%；
显示：块；
}
#水平菜单>ul>li>ul>li>a{
文字装饰：无；
填充物：5px10px；
显示：块；
颜色：黑色；
}
#水平菜单>ul>li>ul>li>a:悬停{
背景色：白色；
}
#水平菜单>ul>li：悬停>ul{
显示：块；
}
#水平菜单>ul>li>ul>li>ul{
显示：无；
背景颜色：浅蓝色；
位置：绝对位置；
左：100%；
排名：0；
宽度：150px；
背景颜色：绿色；
}
#水平菜单>ul>li>ul>li>ul>ul>li>a{
文字装饰：无；
填充物：5px10px；
显示：块；
颜色：黑色；
}
#水平菜单>ul>li>ul>li>ul>ul>li>a:悬停{
背景颜色：黄色；
}
#水平菜单>保险单>保险单>保险单>保险单：悬停保险单{
显示：块；
}