#1
  1. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2003
    Posts
    1,019
    Rep Power
    36

    Css suckerfish on joomla


    I'm struggling with css on my joomla site. I'm trying to develop a dropdown that can have two levels to it. I've got something working with the following css but I have no idea what to change to line the menus up.
    Code:
    /* =======================================
    Top Menu aka Main Menu
    ======================================= */
    .moduletable_topmenu{
       padding:0;
       color: #333;
       height: 30px;
       margin: 0;
       width: 500px;
       font-size: 90%
    }
    
    .moduletable_topmenu h3 {
       background:#666;
       color:#fff;
       padding:0.25em 0;
       text-align:center;
       font-size:1.1em;
       margin:0;
    }
    
    .moduletable_topmenu ul{
       list-style: none;
       margin: 0;
       padding: 0;
    }
    
    .moduletable_topmenu li{
       margin: 0px 15px 0px 0px;
       float: left;
    }
    .moduletable_topmenu li ul {
       position: absolute;
       width: 135px;
       left: -999em;
       border: 1px solid #474748;
       border-bottom: none;
       top: 22px;
    }
    .moduletable_topmenu li:hover ul {
       left: auto;
    }
    .moduletable_topmenu li ul li {
       width: 135px;
       padding: 0;
       border-bottom: 1px solid #474748;
    }
    
    .moduletable_topmenu li a{
       display: block;
       padding: 5px;
       background-color:#fff;
       color: #000;
       font-weight: bold;
       text-decoration: none;
    }
    html>body .moduletable_topmenu li a {
       width: auto;
    }
    
    .moduletable_topmenu li ul li a {
       width: 125px;
       background-color: #221f20;
       color: #fff;
       /* --- 
       filter:alpha(opacity=80); 
       -moz-opacity: 0.8; 
       opacity: 0.8;*/
    }
    
    
    .moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
       color: #e22f00;
       text-decoration: none;
       /* --- 
       filter:alpha(opacity=100); 
       -moz-opacity: 1.0; 
       opacity: 1.0;*/
    }
    
    .moduletable_topmenu li ul li a:hover {
       background-color: #e22f00;
       color: #fff;
       background: url(../images/top_link_bg2_on.png) repeat-y top left;
    }
    
    .moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
       left: auto;
    }
    
    
    .moduletable_topmenu ul li.active a {
       color: #038fd9;
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active a {
       color: #038fd9;
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active a:hover {
       color: #e22f00;   
    }
    
    .moduletable_topmenu li.parent.active ul li a {
       color: #fff;
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active ul li a:hover {
       color: #fff;
       text-decoration: none;
    }
    I am currently using IE 7 and my test site is located at http://vcob.org/2008test if you want to see the menu in action go to that site and mouse over the "About Joomla" link in the menu across the top of the page. You should notice how the sub-menus stack on top of each other and I can't get them to line up. Any help would be so appreciated as I need to get this to work and I can't seem to get anyone at Joomla to help me, thanks in advance.
  2. #2
  3. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2003
    Posts
    1,019
    Rep Power
    36
    Question also posted at:
    http://welovecss.com/showthread.php?p=11880#post11880
    http://www.sitepoint.com/forums/showthread.php?p=4169743#post4169743

IMN logo majestic logo threadwatch logo seochat tools logo