I am using twitter bootstrap and my menu currently display like:
which is perfect but i need to when in mobile view have the menu display like:
Now I know I need to use media query's and such that's not the problem, the problem is how in CSS do i get my menu styled like that with the lines and such...?Here's is the HTML:\[code\]<!--SUBMENU--><div class="row-fluid"> <div class="span12 submenu"> <ul class="nav menu nav-pills"> <li class="item-109"><a href="http://stackoverflow.com/stradix/index.php/company-profile" >Company Profile</a></li> <li class="item-108"><a href="http://stackoverflow.com/stradix/index.php/due-diligence" >Due Diligence</a></li> <li class="item-110"><a href="http://stackoverflow.com/stradix/index.php/our-solution" >Our Solution</a></li> <li class="item-111"><a href="http://stackoverflow.com/stradix/index.php/loan-process" >Loan Process</a></li> <li class="item-112"><a href="http://stackoverflow.com/stradix/index.php/currency-converter" >Currency Converter</a></li> <li class="item-113"><a href="http://stackoverflow.com/stradix/index.php/loan-calculator" >Loan Calculator</a></li> <li class="item-114"><a href="http://stackoverflow.com/stradix/index.php/news" >News</a></li> <li class="item-115"><a href="http://stackoverflow.com/stradix/index.php/important-downloads" >Downloads</a></li> </ul> </div></div><!--SUBMENU-->\[/code\]and The CSS to override default bootstrap:\[code\].submenu .nav-pills > li > a { font-size:1.25em; padding:0; margin:2em 0.9em 0 0; padding: 0 0.9em 0 0; color:#6D6E70; border-right:1px solid #A7A9AB; border-radius:0;}.submenu .nav-pills a:hover { background:none; color:#00ADEE;}.submenu .nav-pills > .active > a { background:none; color:#00ADEE;}.submenu .nav-pills > li:last-child > a { border-right:none; padding: 0; margin-right:0;}\[/code\]I Would post it on JSFIDDLE But for some reason I am still since Friday unable to connect to jsfiddle..Any Help Greatly appreciated.. Thanks.