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

时间：2015-10-01 16:04:42

标签： html css

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

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

2 个答案:

答案 0 :(得分：2)

我添加了其他款式。希望它会有所帮助

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

答案 1 :(得分：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>

相关问题
最新问题