我很难尝试让我的子菜单垂直而不是水平。任何帮助将不胜感激。
HTML:
<ul id="menu">
<li><a href="/" title="HOME">HOME</a></li>
<li>
<a href="/" title="ECO ENERGY">ECO ENERGY</a>
<ul>
<li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
<li><a href="/Incentives" title="Incentives">Incentives</a></li>
<li><a href="/HouseFiles" title="House Files">House Files</a></li>
<li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li>
</ul>
</li>
<li>
<a href="/" title="NEW HOMES">NEW HOMES</a>
<ul>
<li><a href="/NH" title="Evaluations">Evaluations</a></li>
</ul>
</li>
</ul>
CSS:
#menu {
background-color: #206676;
float: left;
width: 100%;
height: 60px;
}
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: left;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
float: left;
}
ul#menu li a {
background: none;
color: #FFF;
text-decoration: none;
}
ul#menu li a:hover {
color: #FFF;
text-decoration: none;
}
ul#menu ul {
display: none;
}
ul#menu li {
display: inline;
}
ul#menu li:hover ul {
display: block;
}
ul#menu li:hover ul li a {
display: block;
color: red;
}
当鼠标悬停在主菜单项上时,我可以切换颜色,但就是不能让它们垂直。
最佳答案
ul#menu ul
{
display:none;
position:absolute;
left:0;
top:20px;
}
ul#menu li
{
display:block;
}
最重要的变化。 JSFIDDLE> http://jsfiddle.net/LSbvJ/ (您将不得不调整填充、边距、文本对齐……但我希望这是一个好的开始。)
关于html - 带有垂直子菜单的水平菜单(仅限 HTML/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21997728/