Home/ Questions/Q 3997560
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:25:01+00:00

I am working on a website and I want to have a navigation bar

  • 0

I am working on a website and I want to have a navigation bar that is set to the bottom right hand corner of a DIV. I have gotten it in place, however, every time I hover over a button a weird glitch occurs that places the hover’ed buttom to the very right position. I can’t seem to figure out a solution to this issue (whatever I do needs to be IE friendly).

Tested in Chrome, FF, and Safari. All the same.

<!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>Untitled Document</title>
<style>

#head {
    width: 80%;
    height: 80px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    background: #56A0D3;
    background-image:url(/image/bubblesTall.gif);
    z-index: 5000;
    padding-top:5px;
    color: #FFFFFF;
}

.menu {
    float:right;
    width:80%;

    position:absolute;
    bottom:0px;
    right:0px;
    margin-right:0px;
    text-decoration:none;
    height:auto;
}
.menu li {
    float:right;
    text-decoration:none;
    list-style-type:none;
}

#nav a:hover,
#nav a:focus {
    color:#ffffff;
    background:#009999;
    text-decoration:none;
    font-size: 14px;
    right: 0px;
    bottom: 0px;
    position: absolute;
}

.menu a {
    float: left;
    display:block;
    text-align:center;
    color: #5ccccc;
    background: #006363;
    font-size: 12px;
    font-weight:200;
    text-decoration:none;
    font-size: 14px;
    position:relative;
    padding-left:5px;
    padding-right:5px;
}

</style>
</head>

<body>
<div id="head">logo
<div class='menu'>

       <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="programs.html">Programs</a></li>
          <li><a href="prospective.html">Prospective Clients</a></li>
          <li><a href="contact.html">Contact Us</a></li>
      </ul>

</div>
</div>



</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks as thought your CSS is the problem. It seems to be a little contradictory.

    Try the following:

    HTML

    <div id="head">logo
<div class='menu'>

       <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="programs.html">Programs</a></li>
          <li><a href="prospective.html">Prospective Clients</a></li>
          <li><a href="contact.html">Contact Us</a></li>
      </ul>

</div>
</div>

    CSS

    #head {
    width: 80%;
    height: 80px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    background: #56A0D3;
    background-image:url(/image/bubblesTall.gif);
    padding-top:5px;
    color: #FFFFFF;
}

.menu {
    float:right;
    position:absolute;
    bottom:0px;
    right:0px;
    text-decoration:none;
    height:auto;
}

ul#nav li{
    float:left;
}

ul#nav li a,
ul#nav li a:visited{
    color:#ffffff;
    background:#009999;
    text-decoration:none;
    display:block;
    padding:5px;
}

ul#nav li a:hover,
ul#nav li a:active{
    color:#ffffff;
    background:#ff0000;
    text-decoration:none;
}

    Here’s a working example: http://jsfiddle.net/YmeKa/1/

    • 0