我想完全设计一个菜单,看起来像下面的简短屏幕
我设计的菜单如下图所示
已给出该菜单的 HTML 代码
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>WOMEN</span></a></li>
<li><a href='#'><span>MEN</span></a></li>
<li><a href='#'><span>JUNIOR</span></a></li>
<li ><a href='#'><span>ACCESSORIES</span></a></li>
<li><a href='#'><span>COLLECTION</span></a></li>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
<li><a href='#'><span>SALE</span></a></li>
<li class="last"><a href='#'><span>MY ACCOUNT</span></a></li>
</ul>
</div>
然后给出CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
background: #fff;
width: 100%;
border-bottom: 10px black solid;
height: 49px;
}
#cssmenu ul {
/*content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;*/
}
#cssmenu ul li {
display: inline-block;
padding: 0;
}
#cssmenu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 9.5px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
float:right;
border-bottom:10px solid #000 ;
}
.last {
float:right;
padding-left:60px;
font-style:italic;
}
#cssmenu ul li a:hover {
color: #fff;
border-color:#5ae1e4;
background-color: #000;
float:left;
}
#cssmenu ul li a:hover:before {
/*width: 50%;*/
border-color:#FFF;
}
#cssmenu ul li a:after {
/*content: '';
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;*/
}
#cssmenu ul li a:before {
/* content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;*/
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
}
#cssmenu ul li.active a:before {
width: 100%;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
height: 1px;
background: #ffffff;
width: 100%;
opacity: .2;
}
#cssmenu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
}
问题是我看不到我的子集。 请帮助我。 提前谢谢你
最佳答案
1 - 例子
你在找这样的东西吗?
2 - 解释
基本上您需要做的是让每个.subnev
不可见,方法是给这个类一个display: none
。然后,您需要将子菜单元素放置在您需要的相对于它们的触发链接的位置。为此,您需要为 .subnev
类提供一个 position: absolute
并为父 li
元素提供一个 position: relative
.
在此之后,您只需要创建一个触发器。因此,在此示例中,我使用链接元素的悬停来触发 .subnev
。在这种情况下,触发意味着将 .subnev
display
属性从 none
更改为 block
,以便元素可见。
3 - 代码
CSS
#cssmenu ul li{
position: relative;
}
#cssmenu ul li:hover > .subnev{
display: block;
}
.subnev{
display: none;
position: absolute;
top: 48px;
left: 0;
background: #fff;
border: 1px solid #f00;
}
关于html - 如何将子菜单添加到导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24296687/