在向现有导航添加垂直下拉菜单时寻找一些帮助/指导。
这是我的html:
<nav class="menu two-thirds column omega">
<ul>
<li><a href="#about">About<br /><span>who we are</span></a>
</li>
<li><a href="#solutions">Solutions<br /><span>what we do</span></a>
</li>
<li><a href="#contact">Contact<br /><span>get in touch</span></a>
</li>
<li><a href="#">Support<br /><span></span></a>
</li>
<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
</ul>
</ul>
这是我的CSS:
nav ul {
float: right;
height: 61px;
}
nav li {
list-style: none;
display: block;
float: left;
margin-top: -6px;
margin-bottom: 0;
}
nav a, nav a:visited, nav a:focus {
display: block;
height: 63px;
padding: 20px 20px 0 20px;
text-decoration: none;
color:#666;
font-weight : 600;
border-top: 3px solid #000;
margin-top: 1px;
}
nav a:hover {
color: red;
border-top-color: #c1c1c1;
}
nav a.active, nav a.active:focus {
/*color: #37b1ff;*/
/*border-top-color: #37b1ff;*/
color: #ea0101;
border-top-color: #ea0101;
-webkit-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
-moz-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
-o-transition:color 0.3s ease, border-top-color 0.3s ease, background-color 0.3s ease;
transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
nav a.active:hover {
color: #000;
/*border-top-color: #37b1ff;*/
border-top-color: #ea0101;
}
nav a span {
color: #c1c1c1;
font-size: 12px;
font-weight : normal;
}
我想要做的是从“支持”项目中添加一个简单的垂直下拉菜单。
谢谢你的帮助。