javascript - Implementing content for each tab item -
i finished designing vertical tab, got stuck. i'm having hard time putting contents appropriate menu items next each other example, if click on home, should see "content home tab in panel next in or container of sort."
when tried put contents of each of tabs items, places @ bottom of navigation menu. couldn't figure out how align contents left side of navigation menu. how can show/align contents of each menu item clicking on 1 of menu items?
$(document).ready(function(){ //----------select first tab , div default $('#vertical_tab_nav > ul > li > a').eq(0).addclass( "selected" ); $('#cssmenu > div > ul').eq(0).css('display','block'); //---------- assigns onclick event each tab link("a" tag) , passes parameter showhidetab() function $('#cssmenu > ul').click(function(e){ if($(e.target).is("a")){ /*handle tab nav*/ $('#cssmenu > ul > li > a').removeclass( "selected"); $(e.target).addclass( "selected"); /*handles tab content*/ var clicked_index = $("a",this).index(e.target); $('#cssmenu > div > ul').css('display','none'); $('#cssmenu > div > ul').eq(clicked_index).fadein(); } $(this).blur(); return false; }); });//end ready@charset "utf-8"; /* starter css flyout menu */ #cssmenu { padding: 0; margin: 0; border: 0; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; width: 200px; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 1px; left: 99%; } #cssmenu ul li:hover>ul { visibility: visible; } #cssmenu ul ul { top: 1px; left: 99%; } #cssmenu ul li { float: none; } #cssmenu ul { font-weight: bold; } #cssmenu ul ul { margin-top: 1px; } #cssmenu ul ul li { font-weight: normal; } /* custom css styles */ #cssmenu { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; background-color: #141414; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; width: 200px; } #cssmenu:after { content: ''; display: block; clear: both; } #cssmenu { background-color: #141414; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; color: #ffffff; display: block; font-family: helvetica, arial, verdana, sans-serif; font-size: 12px; font-weight: normal; line-height: 180%; padding: 13px 20px; text-decoration: none; } #cssmenu ul { border-right: 2px solid #0fa1e0; list-style: none; } #cssmenu>ul { float: left; } #cssmenu>ul>li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; right: 0; top: 50%; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #0fa1e0; margin-top: -10px; } #cssmenu>ul>li:first-child>a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu>ul>li:last-child>a { border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -webkit-border-radius: 0 0 0 5px; } #cssmenu>ul>li.active { background-color: #070707; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; } #cssmenu>ul>li.active>a { box-shadow: inset 0 0 5px black; -moz-box-shadow: inset 0 0 5px black; -webkit-box-shadow: inset 0 0 5px black; } #cssmenu>ul>li:hover>a { background-color: #070707; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; box-shadow: inset 0 0 5px black; -moz-box-shadow: inset 0 0 5px black; -webkit-box-shadow: inset 0 0 5px black; color: #ffffff; } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover>ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 150px; top: 5px; left: 100%; } #cssmenu .has-sub ul { font-size: 12px; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li { background: #0fa1e0; border-bottom: 1px dotted #31b7f1; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #cssmenu .has-sub ul li:hover { background: #0c82b5; } #cssmenu .has-sub .has-sub:hover>ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li { background: #0c82b5; border-bottom: 1px dotted #0fa1e0; } #cssmenu .has-sub .has-sub ul li a:hover { background: #09638a; }<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>css menumaker</title> </head> <body> <div id='cssmenu'> <ul> <li><a href='#a'><span>home</span></a></li> <li class='active has-sub'><a href='#b'><span>products</span></a></li> <li><a href='#c'><span>about</span></a></li> <li class='last'><a href='#d'><span>contact</span></a></li> </ul> <div id="a"> a. content home tab in panel next </div> <div id="b"> b. content products tab in panel next </div> <div id="c"> c. content tab in panel next </div> <div id="d"> d. content contact tab in panel next </div> </div> </body> <html>
multiple changes there, here fix:
$(document).ready(function(){ $('.content-container div').hide() $('.content-container div').eq(0).show(); $('#cssmenu a').click(function(e){ /*handle tab nav*/ $('#cssmenu > ul > li > a').removeclass( "selected"); $(e.target).addclass( "selected"); var index = $(this).parent('li').index(); $('.content-container div').hide() $('.content-container div').eq(index).show(); }); });//end ready@charset "utf-8"; .content-container { float: left; background: white; } /* starter css flyout menu */ #cssmenu { padding: 0; margin: 0; border: 0; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 1px; left: 99%; } #cssmenu ul li:hover>ul { visibility: visible; } #cssmenu ul ul { top: 1px; left: 99%; } #cssmenu ul li { float: none; } #cssmenu ul { font-weight: bold; } #cssmenu ul ul { margin-top: 1px; } #cssmenu ul ul li { font-weight: normal; } /* custom css styles */ #cssmenu { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; background-color: #141414; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; } #cssmenu:after { content: ''; display: block; clear: both; } #cssmenu { background-color: #141414; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; color: #ffffff; display: block; font-family: helvetica, arial, verdana, sans-serif; font-size: 12px; font-weight: normal; line-height: 180%; padding: 13px 20px; text-decoration: none; } #cssmenu ul { border-right: 2px solid #0fa1e0; list-style: none; } #cssmenu>ul { float: left; } #cssmenu>ul>li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; right: 0; top: 50%; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #0fa1e0; margin-top: -10px; } #cssmenu>ul>li:first-child>a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu>ul>li:last-child>a { border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -webkit-border-radius: 0 0 0 5px; } #cssmenu>ul>li.active { background-color: #070707; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; } #cssmenu>ul>li.active>a { box-shadow: inset 0 0 5px black; -moz-box-shadow: inset 0 0 5px black; -webkit-box-shadow: inset 0 0 5px black; } #cssmenu>ul>li:hover>a { background-color: #070707; background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaycayaaacd+7gkaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojuwrtngnuizndhbmjexrti5mjy0q0zbrdcxotyxnunfiib4bxbnttpeb2n1bwvudelepsj4bxauzglkojuwrtngnui0ndhbmjexrti5mjy0q0zbrdcxotyxnunfij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6ntbfm0y1qje0oeeymtffmjkynjrdrkfenze5nje1q0uiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ntbfm0y1qji0oeeymtffmjkynjrdrkfenze5nje1q0uilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz6jcxrgaaaaneleqvr42miwmrl6z8tawpaxlfidyvqnykijfqgyicb+4ul+jmuunmvrcdsho3nrl0caaqbzozie69ar8waaaabjru5erkjggg==); background-repeat: repeat-x; box-shadow: inset 0 0 5px black; -moz-box-shadow: inset 0 0 5px black; -webkit-box-shadow: inset 0 0 5px black; color: #ffffff; } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover>ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 150px; top: 5px; left: 100%; } #cssmenu .has-sub ul { font-size: 12px; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li { background: #0fa1e0; border-bottom: 1px dotted #31b7f1; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #cssmenu .has-sub ul li:hover { background: #0c82b5; } #cssmenu .has-sub .has-sub:hover>ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li { background: #0c82b5; border-bottom: 1px dotted #0fa1e0; } #cssmenu .has-sub .has-sub ul li a:hover { background: #09638a; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='cssmenu'> <ul> <li><a href='#a'><span>home</span></a></li> <li class='active has-sub'><a href='#b'><span>products</span></a></li> <li><a href='#c'><span>about</span></a></li> <li class='last'><a href='#d'><span>contact</span></a></li> </ul> <div class="content-container"> <div id="a"> a. content home tab in panel next </div> <div id="b"> b. content products tab in panel next </div> <div id="c"> c. content tab in panel next </div> <div id="d"> d. content contact tab in panel next </div> </div> </div>you might need change css of menu , content make work way want.
Comments
Post a Comment