Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Navigation bar with drop down menu


  • Please log in to reply
1 reply to this topic

#1 Bobby95

Bobby95

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:11:28 AM

Posted 25 December 2012 - 10:17 AM

i have a horizontal navigation bar in my webpage with drop down menus for each navigation menu.
but the problem is whenever the drop down menu comes out from the navigation bar the body part of the webpage moves down to
give space to the drop down list. I don't it to be so...i want the drop down list to come over the body part without making the page move down.
the coding is as follows:

<html>
<head>
<title>XYZ Pvt. Ltd.</title>
<style>
html { height: 100%; width: 100%; }
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4;
font-size: 13px; line-height: 15px; }
body {background-image:url('images/paper.gif');}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width: 150px;
font-weight:bold;
padding:8px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
li a:hover {
color: #357; }
li ul {
display: none; }
li:hover ul, li.hover ul {
position: relative;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0; }
li:hover li, li.hover li {
float: none; }
li:hover li a, li.hover li a {
color: #357; }
li li a:hover {
color: #357; }
#header { height: 65px; margin: 0px; padding: 0px; text-align: left;
background: #1A446C; color: #D4E6F4; }
#header h1 { padding: 1em; margin: 0px;}
#footer { height: 2em; margin: 0px; padding: 1em; text-align: center;
background: #1A446C; color: #D4E6F4; }

.rightJustified {
text-align: right;
}
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="header">
<IMG SRC="images/pss.jpg" WIDTH="200" HEIGHT="65" >
</div>
<ul id="navbar">
<li><a href="aboutus.php">Home</a>
<ul>
<li><a href="whatpro.php">What ProLoT Means?</a></li>
<li><a href="goals.php">Our Goals</a></li>
</ul>
</li>
<li><a href="services.php">Services</a>
<ul>
<li><a href="swdev.php">Software Developement</a></li>
<li><a href="webdev.php">Web Developing</a></li>
<li><a href="shm.php">System & Hardware Maintenance</a></li>
<li><a href="edu.php">Education</a></li>
<li><a href="nwsys.php">Networking of Systems</a></li>
<li><a href="bsnsmmt.php">Business Management</a></li>
<li><a href="workshops.php">Workshops</a></li>
</ul>
</li>
<li><a href="products.php">Products</a>
</li>
<li><a href="vacancy.php">Career</a>
<ul>
<li><a href="vacancy.php">View Vacancies</a></li>
<li><a href="resume.php">Post your Resume</a></li>
<li><a href="intern.php">Internships</a></li>
</ul>
</li>
<li><a href="corptrain.php">Training</a>
<ul>
<li><a href="corptrain.php">Corporate Training</a></li>
<li><a href="voctrain.php">Vocational Training</a></li>
<li><a href="odtrain.php">On Demand Training</a></li>
</ul>
</li>
<li><a href="contact.php">Contact Us</a>
</li>
</ul>
</body>
</html>

Edited by Bobby95, 26 December 2012 - 04:24 AM.


BC AdBot (Login to Remove)

 


#2 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:04:58 PM

Posted 27 December 2012 - 09:59 PM

I generally search on Dynamic Drive for a menu that has the functionality I am after then customise it (CSS/images etc...)

To fix your problem though, try this (i've changed the width in the li:hover ul, li.hover ul section from 100% to 150px).

<html>
 <head>
 <title>XYZ Pvt. Ltd.</title>
 <style>
 html { height: 100%; width: 100%; }
 body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4;
 font-size: 13px; line-height: 15px; }
 body {background-image:url('images/paper.gif');}
 ul
 {
 list-style-type:none;
 margin:0;
 padding:0;
 overflow:hidden;
 }
 li
 {
 float:left;
 }
 a:link,a:visited
 {
 display:block;
 width: 150px;
 font-weight:bold;
 padding:8px;
 text-align:center;
 text-decoration:none;
 text-transform:uppercase;
 }
 li a:hover {
 color: #357; }
 li ul {
 display: none; }
 li:hover ul, li.hover ul {
 position: relative;
 display: block;
 left: 0;
 width: 150px;
 margin: 0;
 padding: 0; }
 li:hover li, li.hover li {
 float: none; }
 li:hover li a, li.hover li a {
 color: #357; }
 li li a:hover {
 color: #357; }
 #header { height: 65px; margin: 0px; padding: 0px; text-align: left; 
background: #1A446C; color: #D4E6F4; }
 #header h1 { padding: 1em; margin: 0px;}
 #footer { height: 2em; margin: 0px; padding: 1em; text-align: center; 
background: #1A446C; color: #D4E6F4; }

 .rightJustified {
 text-align: right;
 }
 </style>
 <script>
 // Javascript originally by Patrick Griffiths and Dan Webb.
 // http://htmldog.com/articles/suckerfish/dropdowns/
 sfHover = function() {
 var sfEls = document.getElementById("navbar").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
 sfEls[i].onmouseover=function() {
 this.className+=" hover";
 }
 sfEls[i].onmouseout=function() {
 this.className=this.className.replace(new RegExp(" hover\\b"), "");
 }
 }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);
 </script>
 </head>
 <body>
 <div id="header">
 <IMG SRC="images/pss.jpg" WIDTH="200" HEIGHT="65" >
 </div>
 <ul id="navbar">
 <li><a href="aboutus.php">Home</a>
 <ul>
 <li><a href="whatpro.php">What ProLoT Means?</a></li>
 <li><a href="goals.php">Our Goals</a></li>
 </ul>
 </li>
 <li><a href="services.php">Services</a>
 <ul>
 <li><a href="swdev.php">Software Developement</a></li>
 <li><a href="webdev.php">Web Developing</a></li>
 <li><a href="shm.php">System & Hardware Maintenance</a></li>
 <li><a href="edu.php">Education</a></li>
 <li><a href="nwsys.php">Networking of Systems</a></li>
 <li><a href="bsnsmmt.php">Business Management</a></li>
 <li><a href="workshops.php">Workshops</a></li>
 </ul> 
</li>
 <li><a href="products.php">Products</a> 
</li>
 <li><a href="vacancy.php">Career</a>
 <ul>
 <li><a href="vacancy.php">View Vacancies</a></li>
 <li><a href="resume.php">Post your Resume</a></li>
 <li><a href="intern.php">Internships</a></li>
 </ul> 
</li>
 <li><a href="corptrain.php">Training</a>
 <ul>
 <li><a href="corptrain.php">Corporate Training</a></li>
 <li><a href="voctrain.php">Vocational Training</a></li>
 <li><a href="odtrain.php">On Demand Training</a></li>
 </ul> 
</li>
 <li><a href="contact.php">Contact Us</a> 
</li>
 </ul>
 </body>
 </html>

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users