0
Welcome Guest! Login
0 items Join Now

Afterburner menue

Last Post
Search Topic
    • h1becker's Avatar
    • h1becker
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Afterburner menue

    Posted 15 years 1 month ago
    • Hallo,

      I wanna customize the designe of the menue.
      There is a bottom border with a second color.
      Aim was to see these border when the tab is active and when I hoover over the tab.
      Please can you help me with the next step?

      Thank you!

      PS: LINK 


      #nav {height:34px;background:#002F66;z-index:1;position:relative;}
#nav ul {margin:0 0 0 15px;}
#nav li {list-style:none;float:left;padding-left:3px;height:34px;position:relative;}
#nav li a {display:block;padding:0 10px;line-height:30px;color:#fff;font-weight:bold;}
#nav li.active a {background:#fff;color:#1FC4F4;border-bottom:4px solid #1FC4F4;}
#nav li a:hover, #nav li:hover a, #nav li.sfHover a {background:#002F66;color:#fff;text-decoration:none;}
#nav li ul {position:absolute;width:170px;left:-999em;margin-left:-1px;border:1px solid #006B9F;border-top:0;}
#nav li ul ul {margin:-31px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul, #nav li.sfHover ul ul ul ul {left:-999em;}
#nav li li {padding:0;height:auto;background:#fff;width:170px;}
#nav li li a, #nav li li.active a, #nav li li a:hover {margin:0;height:30px;line-height:30px;background:#fff;border-top:1px solid #006B9F;color:#1FC4F4;}
#nav li li a, #nav li.active li a {font-weight:normal;}
#nav li:hover ul, #nav li.sfHover ul {left:4px;}
#nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul, #nav li li li li.sfHover ul {left:0;}
    #477322

  • Re: Afterburner menue

    Posted 15 years 1 month ago
    • You can add the following code in your css file
      #nav li a:hover {border-bottom:4px solid #1FC4F4;}
    #477518
    • h1becker's Avatar
    • h1becker
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Afterburner menue

    Posted 15 years 1 month ago
    • Good morning and thank you Arifin, it looks great.
      The only point to change is, that the border is also in the sublevels.

      So I think it looks better, if the bottom border is only on the first level and there is a small think (like a border) on the left side of sublevel.

      Thank you Arifin!
    #477560
    • h1becker's Avatar
    • h1becker
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Afterburner menue

    Posted 15 years 1 month ago
    • So by trail and error I get the result.

      See the css code:
      /* Header */
#logo {width:962px;height:111px;background:url(../images/logo.png) no-repeat;display:block;margin:0px 0px;}
#header {overflow:hidden;}
#header li {list-style:none;float:left;padding-left:15px;font-weight:bold;}
#nav {height:34px;background:#002F66;z-index:1;position:relative;}
#nav ul {margin:0 0 0 15px;}
#nav li {list-style:none;float:left;padding-left:3px;height:34px;position:relative;}
#nav li a {display:block;padding:0 10px;line-height:30px;color:#fff;font-weight:bold;}
#nav li.active a {background:#fff;color:#1FC4F4;border-bottom:4px solid #1FC4F4;}
#nav li a:hover {border-bottom:4px solid #1FC4F4;} /* ergaenzt */
#nav li a:hover, #nav li:hover a, #nav li.sfHover a {background:#002F66;color:#fff;text-decoration:none;}
#nav li ul {position:absolute;width:170px;left:-999em;margin-left:-1px;border:1px solid #006B9F;border-top:0;}
#nav li ul ul {margin:-31px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul, #nav li.sfHover ul ul ul ul {left:-999em;}
#nav li li {padding:0;height:auto;background:#002F66;width:170px;}
#nav li li a, #nav li li.active a, #nav li li a:hover {margin:0;height:30px;line-height:30px;background:#002F66;border-top:1px solid #006B9F;color:#1FC4F4;}
#nav li li a, #nav li.active li a {font-weight:normal;}
#nav li:hover ul, #nav li.sfHover ul {left:4px;}
#nav li li a:hover {border-left:4px solid #1FC4F4;border-bottom:none !important;} /* ergaenzt seitlicher Balken*/
#nav li li a {border-left:4px solid #002F66;border-bottom:none !important;} /* ergaenzt seitlicher Balken*/
#nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul, #nav li li li li.sfHover ul {left:0;}

      LINK
    #477598

  • Re: Afterburner menue

    Posted 15 years 1 month ago
    • Nice, do you still need any further assistance?
    #477932
    • h1becker's Avatar
    • h1becker
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Afterburner menue

    Posted 15 years 1 month ago
    • Hallo Arifin,

      the only think what is not so perfect is the following constellation:

      "News" is activ
      hover from SCHOOL >> Welcome

      There is a jump!

      I think thats the 4px border. But no idea how to bypass this.
      And you?


      LINK
    #478047

Time to create page: 0.230 seconds