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.
cssul{ 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