2 Replies - 337 Views - Last Post: 22 November 2011 - 03:23 PM

#1 smico  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 17-January 11

Drop Down Menu help

Posted 18 November 2011 - 06:48 PM

Hello all.

I have a navigation bar on a webpage and when the mouse is hoovered over one of the options its supposed to bring down a drop-down menu.

Here is the code

HTML

<!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" />
<title>CheekyPunt365 Home Page</title>
<link rel="stylesheet" type="text/css" href="cheekypunt365.css" />
</head>

<body>
<div id="logo">
<img src="../Pictures/Untitled-1_copy.PNG" alt="CheekyPunt365 logo" height="200" width="1000"/>
</div>
<div id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Tips</a>
<ul>
<li><a href="">Previous Tips</a></li>
<li><a href="">Performance Summary</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
<li><a href="">About Us</a></li>
</ul>
</div>
sasdsf

</body>
</html>



CSS

@charset "utf-8";
/* CSS Document */

/*Centers the logo*/
#logo img {display:block; margin-left:auto; margin-right:auto}

/*Navigation bar*/
#navbar {
width:100%;

margin:0 auto;
float: left;
position: relative;
overflow:hidden;
border-top:1px groove #FF0000;
border-bottom:1px solid #000000;
background: #CCCCCC;

}
#navbar ul{
font-family:Arial, Helvetica, sans-serif;
clear: left;
float: left;
font-size:12px;
margin:0;
padding:0;
position:relative;
left:50%;
text-align: center;
list-style: none;
}
#navbar ul li {
display: block;
position: relative;
float: left;
list-style: none;
margin:0;
padding:0;
right:50%
}
#navbar li ul {display:none;}
#navbar ul li a{
display: block;
text-decoration:none;
color:#000000;
border-right:1px solid #FF0000;
padding: 5px 15px 5px 15px;
background: #CCCCCC;
margin-left: 1px;
white-space:nowrap;
color: #000000;
}

#navbar li:first-child a {
border-left:1px solid #FF0000;
}

#navbar a {display:block;}
#navbar li {float:left;}


#navbar ul li a:hover ul {background:#CCCCCC;}
#navbar li:hover ul {
position:absolute;
display:block
}
#navbar li ul li {
  float:none;
  width:auto;
}
#navbar li:hover a {background:#617F8A;}
#navbar li:hover li a:hover {background:#95A9B1; }



Don't know if anybody can spot what is wrong with the code?

If I take out
position:absolute;


from

#navbar li:hover ul {
position:absolute;
display:block
}



then it will display the drop down menu but makes the navigation bar bigger and the block wider.

Any help appreciated
Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: Drop Down Menu help

#2 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1368
  • View blog
  • Posts: 3,445
  • Joined: 28-November 09

Re: Drop Down Menu help

Posted 20 November 2011 - 12:12 AM

The problem is that you need another UL container for the items, right now they're all separate lists. You're also missing a few closing tags. A majority of your problems can be attributed to missing closing elements.
Was This Post Helpful? 0
  • +
  • -

#3 FrankC  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 46
  • Joined: 06-October 11

Re: Drop Down Menu help

Posted 22 November 2011 - 03:23 PM

Here's a tutorial on how to write such a menu, fast and easy: Create a Drop-down/Fly-out Menu with CSS. Have fun.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1