Hjälp med Dropdown-meny
Hejsan,
Kämpat med ett litet problem senaste timmen, och uppenbarligen kan jag inte se felet..
Problemet är att Dropdown-menyn inte droppar ner visiuellt, utan den droppar ner i själva huvudmenyn, vilket gör att man bara ser halva.
Uppdaterat: Har fått Dropdown-menyn att funka delvis, dock buggigt. Problemet nu är att det inte visas på någon tab alls förutom 'Team', när man väl tryckt på den. Vill att den ska poppa upp direkt man hovrar på enskild tab, som har dropdown. Vet inte varför det beteér sig såhär.. någon till undsättning?
Meny-baren's CSS style:
/* -------------------------------- */
/* NAVIGATION */
/* -------------------------------- */
#navigation {
display: block;
background: -webkit-gradient(linear, left top, left bottom, from(#1c1b20), to(#121116));
font-family: Sansus, Helvetica, Arial;
font-size: 18px;
text-transform: uppercase;
height: 80px;
position: relative;
}
#navigation ul li {float: left; border-right: solid 1px #1c1b20;}
#navigation ul li a {line-height: 80px; padding: 0 60px; color: #fff; font-size: 18px; font-weight: normal; text-shadow: 0 1px 0 #000; border-right: solid 1px #000; display: block;}
#navigation ul li.active a {font-size: 18px; text-shadow: 0 1px 0 #000; background: #d53b3b; color: #fff}
#navigation ul li a:hover {color: #d53b3b;}
#navigation ul li.active a:hover {color: #fff;}
#navigation .has-dropdown:hover a {background: #d53b3b; color: #fff; box-shadow: none}
#navigation ul li .dropdown {z-index: 9999; opacity: 0; visibility: hidden; position: absolute; right: 65px; top: 80px; width: 200px; background: #111; box-shadow: 0 4px 4px rgba(0,0,0,0.5); border-radius: 0px 0 5px 5px; border-bottom: solid 2px #111;}
#navigation ul li .dropdown li {float: none; line-height: 30px; height: 30px; text-transform: none; font-size: 11px; text-align: left; margin: 0; background: none;}
#navigation ul li .dropdown li a {text-transform: uppercase; font-size: 12px; text-align: left; line-height: 30px; height: 30px; font-weight: bold; border-bottom: solid 1px #222; background: none; box-shadow: none; }
#navigation ul li .dropdown li a:hover {background: #17181c; color: #fff; }
#navigation ul li .dropdown li:first-child a {border-radius: 5px 0 0 0;}
#navigation ul li .dropdown li:last-child a {border: 0; border-radius: 0 0 5px 5px}
#navigation .has-dropdown:hover .dropdown {opacity: 1; visibility: visible; z-index: 9999}
HTML/PHP-koden för menyn
<nav id="navigation">
<ul>
<li <?php if($this->uri->segment(1) == ''): echo 'class=" has dropdown"'; endif; ?>><a href="/">Home</a>
<ul class="dropdown">
<li><a href="/team">The Team</a></li>
<li><a href="/the-guild">The Guild</a></li>
<li><a href="/achievements">Achievements</a></li>
<li><a href="/about">About us</a></li>
</ul>
</li>
<li <?php if($this->uri->segment(2) == 'news'): echo 'class=" has dropdown"'; endif; ?>><a href="/articles/news">News</a>
<ul class="dropdown">
<li><a href="/team">The Team</a></li>
<li><a href="/the-guild">The Guild</a></li>
<li><a href="/achievements">Achievements</a></li>
<li><a href="/about">About us</a></li>
</ul>
</li>
<li <?php if($this->uri->segment(2) == 'blogs'): echo 'class=" has dropdown"'; endif; ?>><a href="/articles/blogs">Blogs</a>
<ul class="dropdown">
<li><a href="/team">The Team</a></li>
<li><a href="/the-guild">The Guild</a></li>
<li><a href="/achievements">Achievements</a></li>
<li><a href="/about">About us</a></li>
</ul>
</li>
<li <?php if($this->uri->segment(1) == 'forums'): echo 'class="active"'; endif; ?>><a href="/forums">Forums</a></li>
<li <?php if($this->uri->segment(1) == 'about-us'): echo 'class=" has-dropdown"'; endif; ?>><a href="/about-us">Team</a>
<ul class="dropdown">
<li><a href="/team">The Team</a></li>
<li><a href="/the-guild">The Guild</a></li>
<li><a href="/achievements">Achievements</a></li>
<li><a href="/about">About us</a></li>
</ul>
</li>
</ul>
</nav>
Problemet finns att beskåda på följande adress: http://teamfragnation.ultimatefreehost.com/
