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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a link active state is not working

    I have this simple yet frustrating problem regarding my link css.
    I know what's the problem is but can't seems to fix it.

    I develop a website using Joomla 1.6 and working on the menu and sub menu.
    I want the menus have hover and active state and for the submenu it's working great but the menu itself, it doesn't work at all. The hover can work but not the active state.

    This is the html looks like



    Code:
      <ul class="the_menu">
    
    <li id="current" class="active parent item131">
    <a class="food-service-desc active" href="/Joomla4/index.php/food-service-desc">
    <img class="art-menu-image" src="/Joomla4/images/food.jpg" alt="food service desc" /></a>
        <ul class="category">
               <li class="item133">
                  <a href="/Joomla4/index.php/food-service-desc/nigiri-top">
                  <img class="art-menu-image" src="/Joomla4/images/nigiri.jpg" alt="Nigiri Top" /></a>
              </li>
               <li class="item134">
               <a href="/Joomla4/index.php/food-service-desc/sliced-sushi-rolls">
               <img class="art-menu-image" src="/Joomla4/images/sliced.jpg" alt="sliced sushi rolls" /></a>
              </li>
              <li class="item135"><a href="/Joomla4/index.php/food-service-desc/others">
              <img class="art-menu-image" src="/Joomla4/images/other.jpg" alt="others" /></a></li>
            </ul>
          </li>
    
    <li class="item132">
       <a href="/Joomla4/index.php/retail-desc">
        <img class="art-menu-image" src="/Joomla4/images/retail-text.jpg" alt="retail desc" /></a></li></ul>

    The problem here is the second line, <li id="current" class="active parent item131">

    right now my css is like this

    Code:
    li.item131 {
    width:142px;display: block;
      overflow: hidden;
      
    }
    
    ul .the_menu li #current  a {
    margin-left:-142px; overflow:visible;
    }
    
     li.item131 a:hover {
    display:block; margin-left:-142px; overflow:visible;
    	position: relative;
    }
    As you can see the first state is too global that it overrides the css when the li is current.
    Can anyone give any suggestion how to fix it?
    I have tried many ways but still can't figured it out after two whole days.
    Help please.

    Thanks a lot

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    margin-left:-142px; overflow:visible;
    Is this what you want to apply when the li has an id of current?

    If so:
    Code:
    li.item131#current {
      margin-left: -142px;
      overflow: visible;
    }
    Tip: you can have class definitions without addressing a specific element.

  • #3
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Apostropartheid

    thanks a lot for the reply.
    However, I've tried that before and retied it again after your post and it's not working.
    I guess the

    li.item131 {
    width:142px;display: block;
    overflow: hidden;

    }

    override

    li.item131 #current a {
    margin-left:-142px !important; overflow:visible!important;
    }

    ??
    But I am also not sure.
    Any more ideas?

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by phingko View Post
    Hi Apostropartheid

    thanks a lot for the reply.
    However, I've tried that before and retied it again after your post and it's not working.
    I guess the

    li.item131 {
    width:142px;display: block;
    overflow: hidden;

    }

    override

    li.item131 #current a {
    margin-left:-142px !important; overflow:visible!important;
    }

    ??
    But I am also not sure.
    Any more ideas?
    No, that's not the same thing.

    li.item131 #current a points to this:

    Code:
    <ul>
      <li class="item131">
        <ul>
          <li id="current">
            <a></a>
          </li>
        </ul>
      </li>
    </ul>
    li.item131#current matches this:

    Code:
    <ul>
      <li class="item131" id="current></li>
    </ul>

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dont know if this helps but in one of my webpages I have the following CSS

    Code:
    #menu ul a.active { background:url(images/menu_active.gif) no-repeat bottom center; 
    	color:#000000;}
    and then in the main code I have


    Code:
    	        <div id="menu">
    			<!-- This active page is for the PDF floorplans-->
            		 <ul>
    				 	 <li><a href="#" class="active">Main Page</a></li>
                	 	 <li><a href="Floorplans.htm">Floorplans</a></li>
                		 <li><a href="Help.htm">Help</a></li>
                		 <li><a href="Contact.htm">Contact</a></li>
                	 </ul>
    			<!-- This is where the menu div closes-->
            	</div>
    HTH
    Last edited by escostar75; 07-13-2011 at 02:13 PM. Reason: added more code to make sense

  • #6
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To escostar75,

    It will work by using your code. Thanks heaps! However, the submenu now also in active state as well even though it's not in the page.

    Now the code is

    li.item131.active a{
    margin-left:-142px;
    overflow:visible;
    }


  •  

    Tags for this Thread

    Posting Permissions

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