我想完全设计一个菜单,该菜单看起来像下面的屏幕简短
我设计的菜单在以下屏幕快捷方式中
该菜单的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;
}
}
问题是我看不到子集合我。请帮助我。先感谢您
您是否正在寻找这样的东西?
基本上,您需要做的是.subnev
通过给该类一个,使每一个都不可见display: none
。然后,您需要将子菜单元素放置在相对于它们的触发链接所需的任何位置。为此,您需要给.subnev
类aposition: absolute
和父li
元素a position: relative
。
之后,您只需要创建一个触发器。因此,在此示例中,我使用了link元素的悬停来触发.subnev
。在这种情况下,触发意味着将.subnev
display
属性从更改none
为block
,以使该元素可见。
的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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句