0 Replies - 517 Views - Last Post: 23 April 2011 - 10:49 AM

#1 Tangela  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 08-October 10

Css drop down not working

Posted 23 April 2011 - 10:49 AM

So I been working on this css drop down menu for a few days now and I have no idea what I am doing wrong. All I know is that every time I delete my code and remake my code I will never get the same problem.Also i am using joomla not sure if that helps the problem. Here is my code:

index.php:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
  <head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/buttonbar.css" type="text/css" />
  </head>
  <body>
    <div id="container">
      <div id="banner"><jdoc:include type="modules" name="top" /></div>
      <div id="buttonbar"><ul class="menu">
<li id="item-101" class="current active deeper parent"><a href="/" >Home</a><ul><li id="item-103"><a href="/index.php/home/drop-down-ttest" >Drop Down Test</a></li><li id="item-104"><a href="/index.php/home/contact-2" >Contact (2)</a></li></ul></li><li id="item-102"><a href="/index.php/contact" >Contact</a></li></ul>
</div>
      <div id="content"><jdoc:include type="component" /></div>
    </div>
  </body>
</html>


template.css:
body
{
  font-family:Arial,Helvetica,sans-serif;
}

#container
{
  width:90%;
  min-width:800px;
  min-height: 700px;
  margin-top: -10px;
  margin-left: auto;
  margin-right: auto;
  background-color: #dbdbdb;
}

#banner
{
  width:100%;
  height: 100px;
}

#content
{
  position:relative;
  top: 0px;
  z-index: 9;
}


buttonbar.css
#buttonbar
{
  position: relative;
  z-index: 10;
  width: 100%;
  height: 50px;
  margin: 0px;
  padding: 0px;
  text-decoration:none;
  list-style-type: none;
  text-align: center;
  background-color: #2e2e2e;
}

#buttonbar ul li
{
  display: blocks;
  width: 200px;
  padding-top: 10px;
  list-style-type: none;
  float: left;
}

#buttonbar ul li a
{
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
}

#buttonbar ul li:hover a
{
  color: #0090ff;
  padding: 20px 15px 20px 15px;
  background-color: #4d4d4d;
}

#buttonbar ul li ul li
{
  display: none;
}

#buttonbar ul li:hover ul li
{
  display:block;
  padding: 0px;
  
}

#buttonbar ul li:hover ul li a
{
  color: #ffffff;
  font-size: 15px;
  background-color: #4d4d4d;
}



Is This A Good Question/Topic? 0
  • +

Page 1 of 1