Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't apply CSS class to selected li in navigation

    Hi,

    I've been at this for over a couple of hours and I'm getting to the point where I am losing objectivity.

    All I am trying to achieve is applying some styling to a navigation when the user selects a li in the navigation.

    HTML:

    <div id="navigation">

    <ul>
    <li id="ag_menu_repMenuItems_MenuItem1"><a href="/">Home</a></li>
    <li title="About Us"><a href="/about-us/" title="About Us">About Us</a></li>
    <li title="Asset Finance Solutions"><a href="2.html" title="Asset Finance Solutions">Asset Finance Solutions</a>
    <ul class="childMenu">
    <li title="Hire purchase"><a href="/asset-finance-solutions/hire-purchase/" title="Hire purchase">Hire purchase</a></li>
    <li title="Finance lease"><a href="/asset-finance-solutions/finance-lease/" title="Finance lease">Finance lease</a></li>
    <li title="Refinancing"><a href="/asset-finance-solutions/refinancing/" title="Refinancing">Refinancing</a></li>
    <li title="Covenant-led"><a href="/asset-finance-solutions/covenant-led/" title="Covenant-led">Covenant-led</a></li>
    <li title="Asset-based lending"><a href="/asset-finance-solutions/asset-based-lending/" title="Asset-based lending">Asset-based lending</a></li>
    </ul>
    </li>
    <li title="Industry Expertise"><a href="/industry-expertise/" title="Industry Expertise">Industry Expertise</a></li>
    <li title="FAQs"><a href="/faqs/" title="FAQs">FAQs</a></li>
    <li title="Case Studies"><a href="/case-studies/" title="Case Studies">Case Studies</a></li>
    <li title="News"><a href="/news/" title="News">News</a></li>
    <li title="Events"><a href="/events/" title="Events">Events</a></li>
    <li title="Contact Us"><a href="/contact-us/" title="Contact Us">Contact Us</a></li>
    <li title="Broker Login"><a href="/broker-login/" title="Broker Login">Broker Login</a></li>
    </ul>

    </div>

    CSS:

    /*Reset defaults-----------------------------------------------------------------------------------------------------------*/
    * {padding: 0px; margin: 0px;}
    ul {list-style-type: none;}
    a {text-decoration: none;}

    /*Global*/

    a:active, a:focus, a:hover {
    color: #33b1e6;
    }

    body {
    width:auto;
    line-height: 1;
    background: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #747678;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
    }

    h3 {
    font-family: 'HelveticaNeueW01-55Roma', Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    font-weight: normal;
    color: #33b1e6;
    line-height: 1.125em;
    padding: 0px 0px 15px 0px;
    }

    p, h1, h2, h3, h4, h5, h6, blockquote {
    font-weight: normal;
    }

    li {
    font-size: 0.813em;
    line-height: 1.25em;
    padding: 0px 0px 0px 0px;
    }

    a {
    font-size: 1.0em;
    color: #001b96;
    text-decoration: none;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    }

    a:active, a:focus, a:hover {
    color: red;
    }

    /*Classes*/

    .clear { clear:both; }
    .clear2 {
    clear: both;
    line-height: 0;
    height: 0;
    overflow: hidden;
    max-height: 0;
    font-size: 0;
    }

    .fLeft {float:left}
    .fRight {float:right}

    .small-grey-text {
    font-size: 0.813em;
    line-height: 1.385em;
    color: #747678;
    }

    .medium-blue-text {
    font-size: 2em;
    line-height: 1em;
    color: #0bb0e8;
    padding:5px 0 0 0;
    }

    /*navigation---------------------------------------------------------------------------------------------------------------*/
    #navigation {background: #001b96;float: left;clear: left;width: 960px;margin: 0px 0px 10px 0px;}
    #navigation ul {margin: 0;padding: 0;background: none;list-style: none;list-style-image: none;}
    #navigation ul li {color:#ffffff;font-size: 1em;line-height: 1em;z-index: 100;float: left;padding: 0 0 0 0;}
    #navigation ul li a {display: block;padding: 10px 15px;color: #fff;font-size: 0.813em;line-height: 1em;}
    #navigation ul li + li a {background-image: url(/app_themes/helloloans/images/nav-keyline.gif);background-repeat: no-repeat;background-position: center left;}
    #navigation ul li a:hover {color: #ffffff;background-color:#0bb0e8;}
    #navigation ul li.active a:hover {color: #ffffff;}
    #navigation ul li:hover > .childMenu {display:block;}
    #navigation > ul li.active a {background-color: #0bb0e8;}

    #navigation ul a:hover > .childMenu {
    display:block;
    /*background: #001b96;*/
    }

    /*Child elements*/
    #navigation .childMenu {display:none; position:absolute; width:200px; background-color:#001b96;z-index:999}
    #navigation .childMenu li {float:none; border-bottom:1px solid #FFFFFF;padding:0}
    #navigation .childMenu li a {border-bottom:none; background-image:none;}
    #navigation .childMenu a:hover {background-color:#0bb0e8;width:170px;position:relative;}
    #navigation .childMenu li.selected {height:32px;}
    #navigation ul {padding:0px;}
    .childMenu ul {padding:0px;}
    .childMenu li, .childMenu li a {display:block; float:left; color:#FFFFFF;position:relative;}



    ul li a:active {
    background-color: green;
    }

    /*#menu-home ul li a:active ul.sub-menu li {
    color: green;
    border: 1px solid green;
    }*/

    I tried various things and failed miserably. Any help would be appreciated.

  • #2
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've ripped most of the CSS to make things simpler@

    * {padding: 0px; margin: 0px;}
    ul {list-style-type: none;}
    a {text-decoration: none;}

    a:active {
    color:green;
    }

    No luck yet

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I think I am missing the point here I would need something like js to apply a style to the corresponding li

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    The css parser is weak-minded and believes the last thing it's told. So below all the included style sheets put a block of style statements that contain any changes you want made in the file.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •