MyBB Community Forums

Full Version: drop down nav
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hiya!

I have a css drop down nav bar, i've placed the css in global.css for my theme & put in header template:

<ul id="menu">
  <li><a href="#"><img src="http://habboemotion.com/resource/generalscripts/voltertxtgen/text.php?t=Menu%201%20&s=7&w=1"></a></li>
  <li><a href="#"><img src="http://habboemotion.com/resource/generalscripts/voltertxtgen/text.php?t=Menu%202%20&s=7&w=1"></a>
    <ul>
    <li><a href="#">Sub-Menu 1</a></li>
    <li><a href="#">Sub-Menu 2</a></li>
    <li><a href="#">Sub-Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#"><img src="http://habboemotion.com/resource/generalscripts/voltertxtgen/text.php?t=Menu%203%20&s=7&w=1"></a>
    <ul>
    <li><a href="#">Sub-Menu 1</a></li>
    <li><a href="#">Sub-Menu 2</a></li>
    <li><a href="#">Sub-Menu 3</a></li>
    <li><a href="#">Sub-Menu 4</a></li>
    <li><a href="#">Sub-Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#"><img src="http://habboemotion.com/resource/generalscripts/voltertxtgen/text.php?t=Menu%204%20&s=7&w=1"></a>
    <ul>
    <li><a href="#">Sub-Menu 1</a></li>
    <li><a href="#">Sub-Menu 2</a></li>
    <li><a href="#">Sub-Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#"><img src="http://habboemotion.com/resource/generalscripts/voltertxtgen/text.php?t=Menu%205%20&s=7&w=1"></a>
    <ul>
    <li><a href="#">Sub-Menu 1</a></li>
    <li><a href="#">Sub-Menu 2</a></li>
    <li><a href="#">Sub-Menu 3</a></li>
    </ul>
  </li>
</ul>
</ul>

but it doesn't display right. http://prntscr.com/9cufp

Cheers Smile

~ David
Bump!
Could you please post the CSS you're using too?
Strangely - it's working a bit now.

http://prntscr.com/9edqx

But, it should look like this:

http://habfab.com/error/

The css i'm using is:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #000000;
  padding: 1px 15px 5px 15px;
  margin-left: 1px;
  white-space: nowrap;
  font-family: Arial, Verdana;
  font-size: 14px;
}

li:hover ul {
  display: block;
  position: absolute;
  padding:3px;
}
li:hover li {
  float: none;
  font-size: 11px;
  border-top: 1px solid #0081de;
  border-radius:1em;
}
li:hover ul { background: #0094ff; }
li:hover li a:hover { background: #0081de; border-radius:1em;}

Cheers

~ David