SitePoint.com

lethalrose · Nov 18, 2009, 13:31

Okay I was trying to learn how CSS drop down menus work, but I'm having some issues.

1. The "drop down" part looks like it has an indent. They don't start directly underneath the link that I hover over (Does that make sense?)

2. I'm using CSS sprites for #site, and they are supposed to be horizontal. I can't figure out why they are displaying as vertical. I thought display:inline took care of this?

Thanks in advance for any advice you guys can provide. I'm really confused!

Here is my code:

HTML4Strict Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
        
<meta name="keywords" content="" />
 
        <meta name="author" content="" />
        <meta name="robots" content="all" />
        <meta name="googlebot" content="index,follow" />
<title>Test</title>
<link REL="stylesheet" HREF="stylesheet_test.css" TYPE="text/css" /> 
<link REL="stylesheet" HREF="js_mainmenu.js" TYPE="text/javascript" />
</head>
 
<body>
<div id="template">
<div id="header">
<div id="mainnav">
      <ul id="navmenu-h">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work +</a>
          <ul>
            <li><a href="#">Websites +</a>
              <ul>
                <li><a href="#">qrayg.com</a></li>
                <li><a href="#">craigerskine.com</a></li>
                <li><a href="#">dt.qrayg.com</a></li>
                <li><a href="#">legendofmana.info</a></li>
              </ul>
            </li>
            <li><a href="#">Sketchbook</a></li>
            <li><a href="#">Free Interfaces</a></li>
          </ul>
        </li>
        <li><a href="#">Learn +</a>
          <ul>
            <li><a href="#">Fireworks +</a>
              <ul>
                <li><a href="#">Aqua Button</a></li>
                <li><a href="#">Aqua Button 2</a></li>
                <li><a href="#">Water Drop</a></li>
                <li><a href="#">Light FX</a></li>
                <li><a href="#">Light FX2</a></li>
              </ul>
            </li>
            <li><a href="#">CSS +</a>
              <ul>
                <li><a href="#">CSS Menus</a></li>
                <li><a href="#">Sprite Nav</a></li>
                <li><a href="#">@import</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
</div>
<div id="changesite">
<ul id="site">
    <li><a class="home" href="work.html">Commercial</a></li> 
    <li><a class="who" href="contact.html">Residential</a></li> 
</ul></div>
</div>
</div>
</body>
</html>

CSS Code:

/* Template CSS stylesheet created 10/9/09 */
 
/*Top Template */
 
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 100%;
    color: #64250a;
    background-color: #fffdec;
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: thin;
    border-color: 64250a;
}
 
 
#template{
    width: 924px;
    height: auto;
    margin: 0 auto 0 auto;
    background-image: url(_images/Template_bg.png);
}
 
#header{
    position: absolute;
    top: 0px;
    width: 924px;
    height: 539px;
    background-color: #FFFFFF;
    background-image: url(_images/Template_Top.png);
}
 
 
/*Top Navigation */
#mainnav{
    position: absolute;
    top: 60px;
    left: 100px;
    width: 705px;
    height: 10px;
    background-color: #FFFFFF;
}
 
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }
 
ul#navmenu-h ul {
 width: 160px; /* Sub Menu Width */
 margin: 0;
 list-style: none;
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
}
 
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
 
ul#navmenu-h li { float: left; display: inline; position: relative; }
ul#navmenu-h ul li { width: 100%; display: block; }
 
/* Root Menu */
ul#navmenu-h a {
 border-top: 1px solid #FFF;
 border-right: 1px solid #FFF;
 padding: 6px;
 float: left;
 display: block;
 background: #DDD;
 color: #666;
 font: bold 11px Arial, sans-serif;
 text-decoration: none;
 height: 1%;
}
 
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
 background: #BBB;
 color: #FFF;
}
 
/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
 float: none;
 background: #BBB;
}
 
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
 background: #999;
}
 
/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
 
 
/*Commercial/Residential Switch*/
 
#changesite{   
    position: absolute; 
    top: 400px;
    left: 75px;  
    width: 860px;
    height: 30px;                        
}
 
ul#site {
    list-style: none;
    }
    ul#site li {
        display: inline;
    }
        ul#site li a.home:hover, ul#site li a.home:active,
        ul#site li a.who:hover, ul#site li a.who:active {
            background-position: center center;
        }
    body#home ul#site li a.home,
    body#who ul#site li a.who {
        background-position: top center;
    }
    ul#site li a {
        text-indent: -9999px;
        display: inline;
        height: 30px;
        float: left;
        }
        ul#site li a.home {
        background: url(_images/tab_commercial.png) no-repeat bottom center;
        width: 412px;
        }
        ul#site li a.who {
        background: url(_images/tab_residential.png) no-repeat bottom center;
        width: 412px;
        }

mattevans · Nov 18, 2009, 17:15

Hi lethalrose,

It seems you have removed the default margin and padding off...

Quote:

ul#navmenu-h

... but havent removed it off ...

Quote:

ul#navmenu-h li ul

Hence the reason your nested UL is indenting.

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode