No replies
melwiggles
melwiggles's picture
Offline
newbie
Last seen: 9 years 34 weeks ago
Joined: 2010-12-16
Posts: 1
Points: 2

Hi everyone,

I am trying to create a 2 stage horizontal drop down menu using css and html. I am using dreamweaver 8 to build the site and a mac. I have spent hours and hours now trying to get it to work!! I have got some code from a few websites as this is my first menu I have built.

The code below looks great in dreamweaver, but doesn't display at all in any browser. It just displays as a standard vertical bullet list, no blocks of colour, etc. I need horizontal grey blocks of colour, white border and white text (Eurostile preferably, but IE doesn't seem to like this). The 'Asbestos Removal' link is the only block that needs a drop down to it.

HTML

<ul id="menu">
  <li><a href="">Contact</a></li>
  <li><a href="">Information on Asbestos</a></li>
  <li><a href="">Removal</a></li>
  <li><a href="">Asbestos Removal</a>
    <ul>
    <li><a href="">Management Survey</a></li>
    <li><a href="">Refurbishment &amp Demolition Survey</a></li>
    </ul>
  </li>
  <li><a href="">Home</a></li>
</ul>

CSS

/* CSS Document */
 
 
#menu {
}
 
ul {
  font-family: Eurostile;
  font-size: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: right;
    padding-right: 2px;
    vertical-align: bottom;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #666666;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #CC0000; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1;
}

The 2nd lot of code I tried uses a csshover.htc file, but as I am using a mac, the file seems to corrupt when I download it!

Can anyone tell me what I am doing wrong with this code and how I get it to look like it does in dreamweaver, but in the browser? Also, do I need to have an [if IE] piece of code in there somewhere (again I am not too familiar with this)?

One last thing, will IE only accept standard fonts and it doesn't like Eurostile or Walkway?

REALLY appreciate someones help as this is driving me mad!!!!

Thanks