New Topic/Question
Reply
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.
MultiQuote
| 