Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Mar 2009
    Posts
    21
    Member #
    18550
    Problem solved. Link is working fine now.
    ------------------------------------------------
    Hello, there are sub-navigation lists in the main list. The HTML and CSS is as follows:

    HTML

    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="homepage.html">Home</a></li>
    <li><a href="aboutme.html">Personal Information</a></li>
    <li><a href="#" id="current" class="drop">Item 3</a>
    <ul id="subnavlist1">
    <li><a href="#" id="subcurrent">sub-item1</a></li>
    <li><a href="#">sub-item2</a></li>
    <li><a href="#">sub-item3</a></li>
    </ul>
    </li>
    <li><a href="#" class="drop">Item 4</a>
    <ul id="subnavlist2">
    <li><a href="#">sub-item1</a></li>
    <li><a href="#">sub-item2</a></li>
    <li><a href="#">sub-item3</a></li>
    </ul>
    </li>
    <li><a href="#" class="drop">Item 5</a>
    <ul id="subnavlist3">
    <li><a href="#">sub-item1</a></li>
    <li><a href="#">sub-item2</a></li>
    </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
    </ul>
    </div> <!-- end of menu -->

    CSS

    #navcontainer {
    margin: 0px;
    background: #D3C196;
    padding: 0 1px;
    margin: 0px;
    width: 250px;
    }

    ul#navlist, ul#subnavlist1, ul#subnavlist2, ul#subnavlist3 {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: verdana, arial, sans-serif;
    }

    /* MAIN NAVIGATION LIST */

    ul#navlist li { margin: 0 0 1px 0; }

    ul#navlist li a {
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    background: #DCCEAD;
    border-width: 1px;
    border-style: solid;
    border-color: #EBE2CF #C5AC72 #CDB887 #800000;
    border-left: 12px solid #800000;
    padding: 2px;
    font-size: 12px;
    color: black;
    text-decoration: none;
    font-weight: bold;
    }

    ul#navlist li a:hover {
    background: #D3C196;
    border-color: #C5AC72 #EBE2CF #EBE2CF #800000;
    padding: 4px;
    }

    ul#navlist li a#current { border-left: 12px solid #FF9933; }

    ul#navlist li a.drop {
    background: #DCCEAD url('arrow.gif') no-repeat 95% 5%;
    border-color: #EBE2CF #C5AC72 #CDB887 #800000;
    padding: 2px;
    }

    ul#navlist li a.drop:active { border-color: #EBE2CF #C5AC72 #CDB887 #FF9933; }

    /* SUB NAVIGATION LISTS */

    ul#subnavlist1 li { display: inline; }

    ul#subnavlist1 li a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    padding: 2px;
    background: transparent;
    border-top: 0px none;
    border-right:0px none;
    border-left:0px none;
    border-bottom: 1px dashed black;
    font-size: 11px;
    color: black;
    text-decoration: none;
    font-weight: normal;
    }

    ul#subnavlist1 li a:hover {
    padding: 2px;
    text-decoration: none;
    border-top: 0px none;
    border-right:0px none;
    border-left:0px none;
    border-bottom: 1px dashed black;
    color: white;
    }

    ----------------------------------
    ul#subnavlist2 li { display: inline; }

    ul#subnavlist2 li a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    padding: 2px;
    background: transparent;
    border-top: 0px none;
    border-right:0px none;
    border-left:0px none;
    border-bottom: 1px dashed black;
    font-size: 11px;
    color: black;
    text-decoration: none;
    font-weight: normal;
    }

    ul#subnavlist2 li a:hover {
    padding: 2px;
    text-decoration: none;
    border-top: 0px none;
    border-right:0px none;
    border-left:0px none;
    border-bottom: 1px dashed black;
    color: white;
    }
    -------------------------------------
    ul#subnavlist3 li { display: inline; }

    ul#subnavlist3 li a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    padding: 2px;
    background: transparent;
    border-top: 0px none;
    border-right:0px none;
    border-left:0px none;
    border-bottom: 1px dashed black;
    font-size: 11px;
    color: black;
    text-decoration: none;
    font-weight: normal;
    }

    ul#subnavlist3 li a:hover {
    padding: 2px;
    text-decoration: none;
    border-top: 0px none;
    border-right:0px none;
    border-left:0px none;
    border-bottom: 1px dashed black;
    color: white;
    }

    -----------------------------------

    ul#navlist li a#subcurrent {
    font-weight: bold;
    color: #800000;
    }

    ul#navlist li a#subcurrent:hover { color: #ddd; }

    Problem:

    The sub-current link (a#subcurrent) in subnavlist1, subnavlist2 or subnavlist3 works partially: the text doesn't change its color and weight, however the 'a#subcurrent:hover' link works as it changes its color to grey.

    I have tried using class subnavlist instead of 3 different IDs but that changes the layout. I have tried using subnavlist1, subnavlist2, subnavlist3 in the a#subcurrent link but to no avail. Could anybody please help me in getting the link work properly? I hope I have explained the problem well. Thanks!

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com