html - How to add sub menu to Navigation menu -

html - How to add sub menu to Navigation menu -

i want design menu, next screen short

the menu have designed in next screenshort

the html code menu given

<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>

then css given

@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 { 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 { } #cssmenu ul li.active a:before { width: 100%; } @media screen , (max-width: 768px) { #cssmenu ul li { float: none; } #cssmenu ul li { 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; } }

the problem can not see sub collection me. please help me in this. give thanks in advance

1 - example

are looking this?

http://jsfiddle.net/tcs2s/7/

2 - explanation

basically need create every .subnev invisible, giving class display: none. need position submenu elements wherever need them relative triggering link. need give .subnev class position: absolute , parent li element position: relative.

after this, need create trigger. so, in example, used hovering of link element trigger .subnev. triggering, in case, means changing .subnev display attribute none block, in order create element visible.

3 - code

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 css menu