CSS dropdown menu problem

HTML & CSS
1

Hello,

I am trying design a portfolio site for a college class but I am running into a bit of trouble.

The template is here. On the home link at the top there is a drop down which is causing the child menu to re-size the parent and move all of the list elements over. Is there a way to fix this without having to make the dropdown menu narrower?

Thank you


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
  </head>
  <body>
    <div id="top_nav">
      <ul id="navigation-bar">
        <li class="first">*
        </li>
        <li class="links">
          <a class="sub-menu" href="default.html"><span class=
          "main-link">home</span><br>
          <span class="sub-link-information">information</span></a>
          <ul>
            <li>
              <a href="default.html#">about</a>
            </li>
            <li>
              <a href="default.html#">goals</a>
            </li>
            <li>
              <a href="default.html#">education</a>
            </li>
            <li>
              <a href="default.html#">interests</a>
            </li>
          </ul>
        </li>
        <li class="links">
          <a href="default.html#"><span class="main-link">project a</span><br>
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#"><span class="main-link">project b</span><br>
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#"><span class="main-link">project c</span><br>
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#"><span class="main-link">project d</span><br>
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#"><span class="main-link">project e</span><br>
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="last">*
        </li>
      </ul>
    </div>
  </body>
</html>



/* Navigation menu */
#top_nav {
	color: #FFFFFF;
	float: right;
	margin: 10px 0 0 0;
	height: 50px;
	width: 620px;
}
#navigation-bar{
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
}

#navigation-bar li{
	float: left;
}

#navigation-bar a {
	color: #ffffff;
	text-decoration: none;
	font-size: 1.08em;
	padding: 0;
	margin: 0;
	display: block;
}

#navigation-bar li a:hover{
	color: #00A6FF;
}

/* Drop Down Menu */

#navigation-bar ul{
	
	background: #202020;
	position: absolute;
	left: -9999px;
	margin: 0;
	padding: 0;
	font-size: .7em;
	border-right: 1px solid #232323;
	border-left: 1px solid #232323;
	border-bottom: 1px solid #232323;
	list-style: none;
}

#navigation-bar ul a {
	padding: 5px 15px 5px 15px;
	line-height: 20px;
	color: #808080;
}	

#navigation-bar ul li {
	padding-top: 0;
	margin: 0;
	float: none;
	border-top: 1px solid #2D2D2D;
	border-left: 1px solid #2D2D2D;
	border-right: 1px solid #131416;
	border-bottom: 1px solid #131416;

}

#navigation-bar ul a:hover {
	background-color: #3E3E3E;
	color: #00A6FF;
}

#navigation-bar li:hover > ul {
	position: relative;
	left: -1px;
	top: -1px;
}
/* End Drop Down Menu */
2

Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
    <style type="text/css">
  /* CSS layout */
body {
	margin: 0;
	padding: 0;
	/*background-color: #3B3B3B;*/ 
	background-color: #FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
}


#body-wrapper{
	width: 850px;
	margin: 0 auto 0 auto;
	/*background-color: #E4E4E4;*/
	background-color: #FFF;
}

#masthead {
	background-color: #202020;
	height: 60px;
	min-width: 850px;
	border-bottom: 1px solid #131416;
}
#masthead-bumper{
	height: 20px;
	border-top: 1px solid #232323;
	min-width: 850px;
	margin: 0;
	padding: 0;

}
#masthead-wrapper{
	width: 850px;
	margin: 0 auto;
	height: 60px;
}
#masthead-wrapper img {
	margin: 14px 0 0 0;
}
#header-logo {
	float: left;
	clear: none;
}
/* Navigation menu */
#top_nav {
	color: #FFFFFF;
	float: right;
	margin: 10px 0 0 0;
	height: 50px;
	width: 620px;
}
#navigation-bar{
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
}

#navigation-bar li{
	float: left;
}

#navigation-bar a {
	color: #ffffff;
	text-decoration: none;
	font-size: 1.134em;
	padding: 0 10px 0 0 ;
	line-height: 30px;
	display:block;
	text-indent: 15px;	
}

#navigation-bar li a:hover{
	color: #00A6FF;
}

/* Drop Down Menu */

#navigation-bar ul{
	
	background: #202020;
	position: absolute;
	left: -9999px;
	margin: 0;
	padding: 0;
	font-size: .7em;
	border-right: 1px solid #232323;
	border-left: 1px solid #232323;
	border-bottom: 1px solid #232323;
	list-style: none;
}

#navigation-bar ul a {
	padding: 5px 0 5px 0;
	line-height: 20px;
	color: gray;
}	

#navigation-bar ul li {
	padding-top: 0;
	margin: 0;
	float: none;
	border-top: 1px solid #2D2D2D;
	border-left: 1px solid #2D2D2D;
	border-right: 1px solid #131416;
	border-bottom: 1px solid #131416;

}

#navigation-bar ul a:hover {
	background-color: #3E3E3E;
	color: #00A6FF;
}

#navigation-bar li:hover > ul {
	position: relative;
	left: -1px;
	top: -1px;
}
/* End Drop Down Menu */

#container {
	min-width: 600px;
}

#left_col {
	width: 200px;
	float: left;
	border-right: 1px gray solid;
}

#page_content {
	margin-left: 200px;
}

#footer {
	clear: both;
	text-align: center;
	font-size: .6em;
	margin: 0;
	padding: 5px 0;
	/*background-color: #3B3B3B; */
	color: gray;
}
#footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#footer ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
#footer a {
	color: gray;
	text-decoration: none;
}
#footer a:hover {
	color: #00A6FF;
}

/*
 * Class Definitions
 */

.sub-link-information {
	font-size: .65em;
	padding: 0 15px 0 15px;
	line-height: 20px;
	color: gray;
	display:block;
	text-indent: 0;
}
.first{
	border-right: 1px solid #2D2D2D;
	height: 50px;
}

.links {
	border-left: 1px solid #131416;
	border-right: 1px solid #2D2D2D;
	height: 50px;
}
.links:hover{
	background-image: url('../images/nav-background.gif');
	background-position: bottom;
	background-repeat: repeat-x;

}
.last {
	border-left: 1px solid #131416;
	height: 50px;
}
.sub-menu{
	background-image: url('../images/sub-menu-arrow.gif');
	background-repeat: no-repeat;
	background-position: 2px 39px;
}

.sub-menu:hover{
	background-image: url('../images/sub-menu-arrow-hover.gif');
	background-repeat: no-repeat;
	background-position: 2px 39px;
}
    </style>
  </head>
  <body>
    <div id="top_nav">
      <ul id="navigation-bar">
        <li class="first">*
        </li>
        <li class="links">
          <a class="sub-menu" href="default.html">home
          <span class="sub-link-information">information</span></a>
          <ul>
            <li>
              <a href="default.html#">about</a>
            </li>
            <li>
              <a href="default.html#">goals</a>
            </li>
            <li>
              <a href="default.html#">education</a>
            </li>
            <li>
              <a href="default.html#">interests</a>
            </li>
          </ul>
        </li>
        <li class="links">
          <a href="default.html#">project a
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#">project b 
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#">project c
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#">project d
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="links">
          <a href="default.html#">project e
          <span class="sub-link-information">sub-title</span></a>
        </li>
        <li class="last">*
        </li>
      </ul>
    </div>
  </body>
</html>

I took a different approach, so you may have to recalculate your font sizes BUT:

  1. your doctype was incomplete
  2. BRs will be the bane of you, if you wanna drop something to a different or to add space between… use display:block (and padding/margin)
    3)got rid of the main information link… added the style to your anchors instead and “roughly” calibrated your font sizes… then added display:block to your link-sub-info (see #2)
  3. I didn’t do this… but the top_nav DIV is probably redundant as UL are block elements anyway… consider removing it and adding its style rules to #navigation-bar.

Hope that helps. Good luck in school.

3

It does help, thank you.

I do have another question though. If I wanted to to make the drop down menu 150px wide and the home link be 75px wide how can I do that? Every time i try it expands the the home button and shifts everything over to match the width of the sub menu of the way.

4

Hi,

You are setting the nested ul to be position:relative on hover which brings it back into the flow and disrupts the page. It must remain absolute.

If you set position:relative on the parent list then you can control where the dropdown appears more precisely.

Make these changes.



#navigation-bar ul {width:150px;}
#navigation-bar li {position:relative;}
#navigation-bar li:hover > ul {position:absolute;left: -1px;top:52px;}
/* End Drop Down Menu */
5

Awesome!

Thank you very much, that worked wonders.

I had tried setting up the dropdown with an absolute position but it was putting it on the edge of the browser, but setting the li to relative was the ticket.

Thank you