如何使菜单栏与嵌套子菜单css [英] How to make menu bar with nested submenu css
本文介绍了如何使菜单栏与嵌套子菜单css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用不同背景颜色的菜单，其中包含具有不同背景颜色的子菜单和嵌套子菜单。当我将鼠标悬停在子菜单列表上时，它应该显示嵌套的子菜单。怎么办？ 。这是我的代码。
I want to make a menu with different background color having a submenu and a nested submenu both with different background color . When I hover over submenu list then it should display nested submenu .How to do it ? . This is my code .
<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>
推荐答案
应用/修复您尝试实现的菜单的代码。您可以轻松更改背景颜色和字体颜色。欢迎您为这项工作。
Here i have applied/fixed your codes for the menu you are trying to achieve. You can change Background Color and Font Color easily. Wish this work for you.
#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>
这篇关于如何使菜单栏与嵌套子菜单css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
