Wednesday, 15 May 2013

submenu - sub menu dissapear when too far down -



submenu - sub menu dissapear when too far down -

i'm pretty new css.

i'm trying create sub menu while hover main menu. whole sub menu maintain dissapearing when hover on sec menu

this html

<ul id='drop-nav'> <li><a href='#'>running gear</a> <ul> <li/> <li/> <li><a href='#'>clothing</a></li> <li><a href='#'>shoes</a></li> <li><a href='#'>packs</a></li> <li><a href='#'>electronics</a></li> <li><a href='#'>accessories</a></li> </ul>

and css

<style type='text/css'> ul {list-style: none;margin: 0px; border-radius: 10px;} ul li {display: block;position:relative;float: left;} li ul {display: none;} ul li {display: block;text-decoration: none; white-space: nowrap;color: #fff; } ul li a:hover {background: #f7afb0;} li:hover ul {display: block; position:absolute;} li:hover li {float: none;} li:hover {background: #f7afb0;} li:hover li a:hover {background: #7fceef;} #drop-nav li ul li {border-top: 0px;} li:not(:hover) li {display: none;} </style>

any thought what's causing it?

try doing this. html not nested. compare code mine , should able see you've done wrong.

you need style code suit needs. dropdown works correctly.

css ul{ list-style: none; } ul li{ float: left; } ul li a{ display: block; } ul li ul{ display: none; } ul li:hover ul{ display: block; } html <ul> <li> <a href="#">running gear</a> <ul> <li><a href="#">clothing</a></li> <li><a href="#">shoes</a></li> <li><a href="#">packs</a></li> </ul> </li> </ul>

submenu

No comments:

Post a Comment