Results 1 to 1 of 1

Thread: One Navigation Link isn't wroking

  1. #1
    Join Date
    Jun 2008
    Posts
    21

    One Navigation Link isn't wroking

    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!
    Last edited by TWyPGn; 31 Mar 2009 at 05:20 PM. Reason: Problem solved. Link is working.

Similar Threads

  1. Replies: 0
    Last Post: 03 Oct 2008, 08:35 PM
  2. Link behavior in text navigation menu
    By gnubler in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 30 Dec 2006, 03:35 PM

Posting Permissions

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