Forums

Roughnite

Hi, i made a dropdown menu for this site i am working on using only CSS and it seems to work fine in firefox and safari, but when i test it in IE the dropdowns are pushed all the way to one side of the nav, any advice? here is the source code and a link:

http://www.marenastudios.com/client1/es ... /index.php

html:

<ul id=\"navigation\">
    	<li><a href=\"about.php\" class=\"about\">about us</a>
    	  <ul class=\"dropdown\">
    	    <li><a href=\"bios.php\" class=\"bios\">bios</a></li>

            <li><a href=\"company.php\" class=\"company\">our parent company</a></li>
  	    </ul>
    	</li>
        <li><a href=\"design.php\" class=\"services\">services</a>
          <ul class=\"dropdown\">
            <li><a href=\"design.php\" class=\"design\">architectural, interior design &  decorating services</a></li>
            <li><a href=\"construction.php\" class=\"construction\">general contracting, construction management<br /><span class=\"dropdown-indent\"></span>owner's representative and sub contracting</a></li>

            <li><a href=\"facilities.php\" class=\"facilities\">facilities</a></li>
          </ul>
      </li>
       	<li><a href=\"residential.php\" class=\"projects\">projects</a>
       	  <ul class=\"dropdown\">
       	    <li><a href=\"residential.php\" class=\"residential\">residential</a></li>
       	    <li><a href=\"projects/commercial/\" class=\"commercial\">commercial</a></li>

   	      </ul>
   	  </li>
       	<li><a href=\"clients.php\" class=\"clients\">clients</a></li>
        <li><a href=\"greenliving/\" class=\"greenliving\">green living</a></li>
        <li><a href=\"news/\" class=\"blog\">news</a></li>
        <li id=\"last\"><a href=\"contact.php\" class=\"contact\">contact</a></li>
    </ul>

CSS:

ul#navigation  {
	float: right;
	margin-top: 10px;
	width: auto;
	font-size: 13px;
	background-color: #FFFFFF;
	height: 40px;
}
ul#navigation li  {
	display: inline-block;
	padding-right: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #777777;
	padding-left: 10px;
	text-align: center;
	float: left;
}
ul#navigation a  {
	color: #777777;
	font-weight: lighter;
	letter-spacing: 1px;
}
ul#navigation  a:hover {
	color: #FC7215;
}
ul#navigation  li#last {
	border-right-style: none;
	padding-right: 0px;
}
ul#navigation li ul {
	letter-spacing: 0px;
	position: absolute;
	width: auto;
	visibility: hidden;
}
ul#navigation li:hover ul {
	visibility: visible;
}
ul#navigation li ul li {
	display: list-item;
	margin-right: 0px;
	border-style: none;
	clear: left;
}
ul.dropdown {
	line-height: 17px;
	padding-top: 7px;
	margin-left: -10px;
}
.dropdown-indent  {
	margin-left:-21px;
}

thanks!

Roughnite

anyone?

TheDoc

I like the design, good stuff.

I've actually had this problem before and I'm scratching my brain trying to figure out how I fixed it. If anything pops up I'll let you know.

treehouse : what would you like to learn today?

Forums

css dropdown not working in IE (big surprise)