html - Weebly Navigation - Parent Menu Item Stays in hover when mouse on child item -
so, beginner on css , html, , trying past hour work, wont!
so want parent menu item stay hovered when mouse goes on child of parent in dropdown menu.
here code..
html
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body class='short-header-page wsite-theme-light'> <div id="header-wrap"> <div class="container"> <table id="header"> <tr> <td id="header-right"> <table> <tr> <td class="phone-number">{phone:text}</td> <td class="social">{social}</td> <td class="search">{search}</td> </tr> </table> <div class="clear"></div> </td> </tr> </table> </div><!-- end container --> </div><!-- end header-wrap --> <div id="nav-wrap"> <div class="container"> <table> <tr> <td id="logo">{logo}</td> <td id="nav"><div id="navigation">{menu}</div></td> </tr> </table> </div><!-- end container --> </div><!-- end nav-wrap --> <div id="banner-wrap"> <div class="container"> <div id="banner"> <div class="wsite-header"></div> <div style="clear:both;"></div> </div><!-- end banner --> </div><!-- end container --> </div><!-- end banner-wrap --> <div id="main-wrap"> <div class="container"> {content} </div><!-- end container --> </div><!-- end main-wrap --> <div id="footer-wrap"> <div style="visibility:hidden;"class="container"> {footer} </div><!-- end container --> </div><!-- end footer-wrap --> </body> </html>
css
/* navigation --------------------------------------------------------------------------------*/ #nav-wrap .container { clear: both; overflow: hidden; position: relative; border-bottom:1px solid #e8e8e8; margin-bottom:40px; } #nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody { vertical-align:bottom; } td#nav { float:right; } #navigation { line-height: 1; float: right; } #navigation ul { display: inline; list-style: none; float: right; max-width:700px; margin-bottom:-1px; } #navigation li { display: inline; position: relative; list-style: none; margin-left:6px; float: left; } #navigation ul li { display: block; color: #333; text-decoration: none; padding: 18px 7px 8px; margin:0 0px 1px; border: 0; outline: 0; list-style-type: none; box-sizing:border-box; float: left; font:13px 'bookman',arial,sans-serif; text-transform:uppercase; } #navigation ul li#active a{ padding: 18px 7px 4px; border-bottom:4px solid #72bc11; color:#000; } #navigation ul li a:hover { padding: 18px 7px 4px; border-bottom:4px solid #ff6600; color: #000a0f; } #navigation ul li a:hover { padding: 18px 7px 4px; border-bottom:4px solid #ff6600; color: #000a0f; } /* navigation submenu's --------------------------------------------------------------------------------*/ #wsite-menus .wsite-menu { background:#fff; position:relative; } #wsite-menus .wsite-menu li { background: #f4f4f4; border:none; border-bottom: 1px solid #e8e8e8; border-top: 1px solid white; display: block; } #wsite-menus .wsite-menu li a:hover { color: #72bc11; background: #eee; }
can me guys? please desparate dont know how make work! :/
#wsite-menus .wsite-menu: hover #navigation ul li { color: #333; }
Comments
Post a Comment