[英]How to make menu bar with nested submenu 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>
我添加了其他樣式。 希望對你有幫助
#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>
在這里，我已經為您要實現的菜單應用/修復了您的代碼。 您可以輕松更改背景顏色和字體顏色。 祝您工作順利。
#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使子菜單與其父菜單處於同一水平線？
[英]How to make the submenu to be at the same horizontal as its parent's menu with this css?
選擇子菜單后如何使導航欄的主菜單處於活動狀態（突出顯示）
[英]how to make main menu of a nav bar active(highlighted) after selecting submenu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.