SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-Down Menu giving me some trouble - RokNavMenu for Joomla!

    Hi all,

    Good to be back!!! Been a looooooooooooong time since I did any web-work and hit SitePoint as a result.

    I am working on a new site for our local youth baseball league. End result won't be insanely fancy. Test site is here:

    http://joomlatest.chrisbartlett.net/

    What I am trying to do is get an operational drop-down menu at the top. You can see it in all it's not-so-operational glory. LOL! To do this, I installed a module called RokNavMenu:

    http://www.rockettheme.com/extensions-joomla/roknavmenu

    If you would, please look at the two attached screenshots. One is the menu when set to "default". This is actually the look I prefer, but as you can see in "Contact" for example, the sub-menus appear without need to hover to get them. The 2nd screenshot is with the style set to "Fusion". This actually works (sort of), but as you can see, the whole thing gets thrown to the right.

    I cannot seem to find any way IN the Joomla Administrator to edit CSS or any of the files associated with this module, but via FTP, I found this CSS file related to "Fusion".

    Code:
    body {font-family:Helvetica,Arial,sans-serif;font-size:12px;}
    
    /* CORE */
    
    .menutop,.menutop * {margin:0;padding:0;}
    .menutop {float:left;position:relative;padding-bottom:2px;}
    .menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
    .menutop li a.item {cursor:pointer;}
    .menutop li span.item {cursor:default;outline:none;}
    .menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
    .menutop li li .item, 
    .menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
    .menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
    .menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
    .menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
    .menutop li li {position:relative;float:none;}
    
    /* Drop Downs */
    .menutop ul {width:175px;position:relative;}
    
    /* Level 1 */
    .menutop li .item {text-decoration:none;display:block;padding:0 15px;background:#ddd;border-color:#eee #ccc #ccc #eee;border-style:solid;border-width:1px;color:#333333;text-decoration:none;}
    
    .level1 .f-mainparent-itemfocus .item {background:#ccc 100% 100% no-repeat;border-color:#ddd #bbb #bbb #ddd;border-style:solid;border-width:1px;}
    
    .menutop li:hover > .item {background-color:#ccc;border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #bbb;border-bottom:1px solid #bbb;}
    .menutop li:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;}
    
    /* Level 2 */
    .menutop .level2 li > .item {background:#ccc;border-color:#ddd #bbb #bbb #ddd;border-style:solid;border-width:1px;}
    .menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {background-image:url(../images/level2-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    .menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;color:#333;}
    .menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {background-image:url(../images/level3-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    
    /* Level 3 */
    .menutop .level3 li > .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;border-style:solid;border-width:1px;}
    .menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {background-image:url(../images/level3-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    .menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {background:#aaa;border-color:#bbb #999 #999 #bbb;color:#333;}
    .menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {background-image:url(../images/level4-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    /* Level 4 */
    .menutop .level4 li > .item {background:#aaa;border-color:#bbb #999 #999 #bbb;border-style:solid;border-width:1px;}
    .menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {background-image:url(../images/level4-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    .menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {background:#999;border-color:#aaa #888 #888 #aaa;color:#333;}
    
    /* regular hover */
    .menutop li:hover .item:hover, .menutop li.active .item:hover  {background-color:#2c87c0;border-top:1px solid #138fdc;border-left:1px solid #138fdc;border-right:1px solid #0d5f92;border-bottom:1px solid #0d5f92;color:#fff}
    .menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {background-image:url(../images/hover-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
    
    /* seperator hover */
    .menutop span.item:hover,
    .menutop li:hover span.item:hover {background-color:#666;border-top:1px solid #777;border-left:1px solid #777;border-right:1px solid #555;border-bottom:1px solid #555;color:#fff}
    .menutop li:hover span.daddy:hover {background-image:url(../images/sep-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
    
    /* Root Items */
    .menutop li.root {width:auto;float:left;height:30px;} 
    .menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
    .menutop li.root:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;}
    .menutop li.root > .daddy, .menutop li.root:hover > .daddy {background-image: url(../images/top-dark.png); background-position: 100% 100%; background-repeat: no-repeat;}
    
    /* Active Items */
    .menutop li.active > .item {background-color:#EE501C;border-color:#F86134 #D24916 #D24916 #F86134;color:#fff;}
    .menutop li.active > .daddy {background-image:url(../images/active-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
    .menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {background-image:url(../images/top-light.png);background-position: 100% 100%;}
    
    
    /* No JS */
    .menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:170px;top:0;}
    .menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
    .menutop li:hover ul, 
    .menutop li.sfHover ul {left: 0;top:32px;}
    .menutop ul {width:175px;}
    .menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;top: 0;}
    
    .menutop .level2 li {position:relative;float:left;width:100%;}
    
    /* Fusion Pill */
    .fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
    .fusion-pill-r {margin-left: -12px;height: 35px;}
    
    /* Fusion JS */
    .fusion-js-container {display:block;height:0;left:0;overflow:visible;position:absolute;top:0;z-index:600000!important;background:transparent !important;}
    .fusion-js-subs {display:none;margin:0 0 0 -2px;overflow:hidden;padding:0 2px;position:absolute;}
    It's been nearly 7 years since I played with CSS code, and while this is not completely foreign to me, it's certainly not as obvious as it used to be. Truth be told, I don't even know if the trouble I'm having is even CSS-related. But I suspect so.

    Can someone give me a hand, please? Ultimately, what I would like is for the "Default" style to work. But anything functional will do. Thanks!!!

    Chris
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Chris,

    I can't help you with joomla but you can get the menu working by adding this css somewhere after the original styles:

    Code:
    #header ul{padding:0}
    #header ul.menu{text-align:left}
    #header ul.menu li{float:left;}
    #header ul.menu li ul{
    left:-999em;
    right:auto;
    top:100%;
    width:auto;
    }
    #header ul.menu li:hover ul{
    left:auto;
    }
    #header ul.menu li li{
    float:none;
    display:block;
    width:auto;
    }
    #header ul.menu li li a{
    display:block!important;
    float:none;
    width:auto;
    }
    #header ul.menu li:hover > a{background:#0D4C89;color:#fff}
    Hope it helps anyway

  3. #3
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I'll be damned. After all this time, you're still here! Hi Paul!

    Thanks for the reply, I greatly appreciate it.

    Just inserted your code at the end of what I posted (which is the stylesheet for the menu module). It does seem to be working! Have a look-see. Now I'm just wondering why the entire menu is up and to the right on the page... In Joomla, this should be right above the red block starting on the left. But that's not working.

    Would you have any idea, based on the code, why it's ending up where it is? Damned if I can figure it out.

    CB

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Worldbuilder View Post
    Now I'm just wondering why the entire menu is up and to the right on the page...
    Its position is set by this code:

    Code:
    #header ul {
    display: block;
    margin: 0px 0px 1px 0px;
    text-align: right;
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    position: absolute;
    top: 0;
    right: 0px;
    }
    You could instead do this:

    Code:
    #header ul {
    display: block;
    margin: 0px 0px 1px 0px;
    text-align: right;
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    position: absolute;
    left: 10px;
    top: 50px;
    }
    or just add this at the bottom of your style sheet:

    Code:
    #header ul {
    left: 10px;
    top: 50px;
    }

  5. #5
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Your first suggestion worked beautifully, Ralph. The CSS you mentioned was in a file in Joomla called "layout.css" in the Beez_20 template (in case anyone else ever runs into this).

    Thanks, guys! Now that I am slowly returning to the world of web design, I'll be back.

    I remembered this forum was the best, and yep... It still is.

    Thanks!

    CB

  6. #6
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UGH!

    I broke it again...

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Worldbuilder View Post
    UGH!

    I broke it again...
    It seems the class "menu" in the HTML has been changed to "menutop".

    Code:
    #header ul.menutop li ul{
    left:-999em;
    right:auto;
    top:100%;
    width:auto;
    }
    Bad idea to change class names at this stage.

  8. #8
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting... I never changed that, so I can only assume something in Joomla! dynamically altered it. Never found anything to fix it, but there is setting in the module to enable javascript. That was set to "no". I do know it typicalls wants to be set to "yes", so i did that and it's back working.

    Odd.

    Thanks, fellas!

    CB

  9. #9
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again, guys.

    Just thinking about styling, and on of the things I'd like to do is center the little downward-facing arrows. See how they are in the bottom right now? I'd like 'em centered. I think the code that is doing this (several instances) is:

    background-position: 100% 100%;

    I've tried a few changes to no avail. Any ideas, please? Thanks!

    And also, what part of the CSS code is setting the height of the top-level menues? There's a lot of dead space in there and I'd like to make them shorter to fir better. The sub-menus seem to be only as high as necessary, and I like that. Apologies, all; I'm RE-learning!

    LOL

    CB

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could try making these changes:

    Code:
    .menutop li.root > .item {
    float: left;
    width: auto;
    height: 30px;
    line-height: 30px;
    }
    
    
    #header ul li a:link, #header ul li a:visited {
    text-transform: uppercase;
    padding: 10px;
    padding: 4px 10px;
    display: inline;
    }
    
    .menutop li.root > .daddy, .menutop li.root:hover > .daddy {
    background-image: url(../images/top-dark.png);
    background-position: 100% 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    }
    You will then have to do some repositioning of the menu, and make few changes to the .active class, but that will get you closer to what you want.

  11. #11
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmm... Tried that, but couldn't even find the code:
    Code:
    #header ul li a:link, #header ul li a:visited {
    text-transform: uppercase;
    padding: 10px;
    padding: 4px 10px;
    display: inline;
    }
    Well, perhaps I'll get back to that. Here's a more general question... These are... "Boxy". Any way to round the top corners at all? I don't know, just kinda "pretty them up" a tad...?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Worldbuilder View Post
    couldn't even find the code
    Looks like they are in the personal.css file.


    Any way to round the top corners at all? I don't know, just kinda "pretty them up" a tad...?
    It's easy to do with CSS3 rounded corners, but it will require more than that, as you'll need to move them apart etc. or it will not look good. Personally, I'd say leave it for now, but it you do want them to look different, it might be worth doing a mockup first in something like Ps to establish the look you want.

  13. #13
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I'll leave it for now and will have a look at the personal.css file. Will research rounded corners as well and get back to y'all. THANKS!

  14. #14
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    OK, something new... If you would be so kind, please look again at http://joomlatest.chrisbartlett.net/

    There USED to be a fontsize editor at the top right. I was able to get rid of that in a js file. What I'd like to do is "lift" the whole site. Does that make sense? Basically, all that whitespace at the top is pointless. I've tried a few things but am having trouble, mainly due to the menu getting all out of whack when I change some things. There are multiple CSS files in play here and I'm not sure which one (or several) controls what I want to do.

    Could I ask your expert eyes, please? Thanks!

    CB

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    In your personal.css file, change this:

    Code:
    #all #header {
    padding-top: 8.0em;
    }
    to something like this:

    Code:
    #all #header {
    padding-top: 4em;
    }
    and change this:

    Code:
    #header ul {
    display: block;
    margin: 0px 0px 1px 0px;
    text-align: right;
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    position: absolute;
    left: 10px;
    top: 50px;
    }
    to this

    Code:
    #header ul {
    display: block;
    margin: 0px 0px 1px 0px;
    text-align: right;
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    position: absolute;
    left: 10px;
    top: 0;
    }

  16. #16
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do believe that did it! Awesome! THANKS! Lovin' it... Hours of Google searching and reading Joomla docs and forum posts to no avail (although I did get close). one post here... FIXED.

    You guys rock.

    CB

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Glad to be of service. It was just a CSS issue, really, so it would be hard to Google a specific situation like this. That's what we're here for.

  18. #18
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again, Ralph (and Paul and everyone else)!

    So I've been playing with the spacing/styling of this menu now for a few days. I've found a tiny bit of success, but only in styling. I've been able to edit some colors, etc.

    Spacing issues??? EPIC FAIL.

    Grrrrrrrrrr... I could use a little help here. I don't want to get long-winded, so here's the skinny:

    1. The top level menu. Too tall. Too much padding around the text inside the boxes. As an example, the sub-menu height is perfect. Left & right padding is also a bit much. Help!
    2. Text inside the top menus is centered. Perfect. Text inside the sub-level menus seems centered also, but there, I don't want that. I want it on the left. And I'd like no (or very little) left/right padding in there. Help!
    3. Sub-menu width. Seems fixed at 200px. I found how to edit that (sorta, but it's clunky), but shouldn't it be percentage based on the text in the menu? Hate having a fixed width. Would rather have the width be as wide as the longest menu item necessitates. Does that make sense? Help!

    THANKS! I am having no luck here and help would be most appreciated.

    CB

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Chris,

    You can over-ride some of the styles like this:

    Code:
    #header ul,
    #header ul.menutop li,
    #header ul.menutop li a{
    padding:0;
    height:auto;
    }
    #header ul.menutop li a,
    #header ul.menutop li.active a{
    padding:0 5px;
    height:auto;
    }
    .fusion-js-subs li{
    text-align:left;
    padding:0;
    }
    .fusion-js-subs li a{
    padding:0 5px!important;
    }
    Just adjust the padding to suit.

    The problem with that menu is a the widths are written inline via the JS so you would be fighting it all the way if you tried to change them. Fluid width dropdowns are hard enough to do anyway and need a special construction to work so I think its too much trouble to change here. You could reduce the width if needed by using !important to over-ride the inline styling.

    I don't like the change to bold on hover as that will make the menu jump when the element gets bigger due to the bold text.

  20. #20
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Your code addition worked beautifully reducing the padding and giving the menus a very nice size. I don't think I'll even edit. And the left alignment of the text in sub-menus is perfect. :-) THANKS!

    One unexpected result was the menu "lifting" up all the way to the top of the site. I was able to drop it down (desired) by changing:

    Code:
    #header ul {
    display: block;
    margin: 0px 0px 1px 0px;
    text-align: right;
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    position: absolute;
    left: 10px;
    top: 0px;
    To
    Code:
    #header ul {
    display: block;
    margin: 0px 0px 1px 0px;
    text-align: right;
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    position: absolute;
    left: 10px;
    top: 10px;
    Now what I need to do is raise up the slideshow to meet the bottom of the top-level menu. Earlier in this thread, if I am re-reading correctly, this was suggested:

    Code:
    #all #header { padding-top: 8.0em; }
    to something like this:

    Code:
    #all #header { padding-top: 4em; }
    Well, I have it at 4.9em right now. Changed to 2.9em to try, but that didn't lift the slideshow, rather, it seems to cut some of it off at the bottom.

    Any ideas?

    THANKS!

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Try changing this (template.css, around line 10):

    Code:
    #fpssContainer104.fpss-template-sleek {
    position: relative;
    top: 53px;
    z-index: 99;
    width: 1030px;
    height: 300px;
    margin: 4px auto;
    padding: 0;
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
    }
    to this

    Code:
    #fpssContainer104.fpss-template-sleek {
    position: relative;
    top: 40px;
    z-index: 99;
    width: 1030px;
    height: 300px;
    margin: 4px auto;
    padding: 0;
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
    }

  22. #22
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BINGO! But it wasn't in the template.css file. In the Joomla filesystem, it was /modules/mod_fpss/tmpl/Sleek/css/template.css.php. Rather irritating in the world of Joomla. THANKS!

    OK, last things for this menu system, I think...
    The problem with that menu is a the widths are written inline via the JS so you would be fighting it all the way if you tried to change them. Fluid width dropdowns are hard enough to do anyway and need a special construction to work so I think its too much trouble to change here. You could reduce the width if needed by using !important to over-ride the inline styling.

    I don't like the change to bold on hover as that will make the menu jump when the element gets bigger due to the bold text.
    So then how should I tackle the width of the sub-menus? And I agree about the bold. Not to intrusive it seems, but bad precedent. How do I change that? Can't find a bold or "strong" setting anywhere in CSS...

    :-(

    CB

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I would leave the sub menus at a fixed width because it will be awkward to place the arrows and to get a full width background with the system you are running. Most dropdowns are fixed width so I don't think its a problem. Otherwise the only other soution would be to apply widths to each as required which is also awkward.

    You can remove the bold with something like this:
    Code:
    /* layout css -  add after line 122 */
    #header ul li.parent > a {
    font-weight:bold!important;
    color:#000;
    }
    #header ul li a:hover {
    font-weight: normal;
    }

  24. #24
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I will leave them fixed in width. Gotcha. As far as the bold, I can certainly implement your solution, but I'm surprised there's not some code to simply remove...?

  25. #25
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again, Paul.

    So I went to layout.css to copy in your code and found on Line 122 the following:
    Code:
    #header ul li a:hover,
    #header ul li a:active,
    #header ul li a:focus
    {font-weight:bold;}
    As a test, instead of copying in your code, I simply commented out all that. Worked! No more bold on hover. All seems fine, but I wonder if there will be unintended consequences on a larger scale? Can't imagine so, but I'm not the expert.


Bookmarks

Posting Permissions

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