Hi all I'm facing a problem in positioning a CSS drop down menu properly.
Here are the details:
Here are the screenshots:
Whenever I am hovering the mouse over link "Individual ", the sub-menu of the Individual link is displaying beside it (as you can see in the screen shots). I want the sub-menu of the link "Individual " to display below the Individual link (as all normal websites have).
Here is my code:
Can someone please point me out what I doing wrong. I have wasted nearly 2 hours figuring out what the error is.
Thank you very much for looking.
Many thanks for your help.
Here are the details:
Here are the screenshots:
Whenever I am hovering the mouse over link "Individual ", the sub-menu of the Individual link is displaying beside it (as you can see in the screen shots). I want the sub-menu of the link "Individual " to display below the Individual link (as all normal websites have).
Here is my code:
Code:
<style>
#navbar ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
font-size: 130%;
text-align: center;
border-bottom:3px solid #fff;
background: #868749;
color: #000;
}
#navbar a {
float:left;
width:6em;
height:30px;
text-decoration:none;
color:#fff;
background:#868749;
padding:0.5em 0.6em;
border-right:1px solid #fff;
}
#navbar a:hover {
background:#5b662e;
color: #fff;
}
#navbar li {
display:inline;
}
#navbar li ul {
display: none;
width: 5em;
background-color: #69f;}
#navbar li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #nav li.hover li {
float: none; }
#navbar li:hover li a, #nav li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="index.html"><font color="#FFFF66">Home</font></a></li>
<li><a href="individual.php"><font color="#FFFF66">Individual</font></a>
<ul>
<li><a href="#"><font size="3">Resident</font></a></li>
<li><a href="#"><font size="3">International Student</font></a></li>
<li><a href="#"><font size="3">Employee</font></a></li></ul>
</li>
<li><a href="business.php"><font color="#FFFF66">Business</font></a></li>
<li><a href="about.php"><font color="#FFFF66">About Us</font></a></li>
<li><a href="contact.html"><font color="#FFFF66">Contact Us</font></a></li>
<li><a href="login.php"><font color="#33FF00" face="Verdana, Geneva, sans-serif" size="2"><i><b>Secure Login</b></i></font></a></li>
</ul>
</div>
Thank you very much for looking.
Many thanks for your help.
Comment