There are only two menu items at present.
When I select the the second menu item it moves up a few pixels while the top item remains unmoved.
When I select the top menu item it moves up and the bottom item moves down at the same time.
If I’ve selected the bottom item and then slowly move to the top item they again move apart from each other, the top one moves up and the bottom moves down.
Also, my comments indicate that there are two lines that change the menu item font size. Is this necessary?
I’d sure like to clean this up before I mess it up!
CSS
/* ---------------container for the navigation ----------------------*/
#nav {
margin:0;
padding:0;
list-style:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#fff;
/*font-size: 60%; /* changes font size */
line-height: 60%;
position: fixed;
top:10px;
width:26.67% /* width of navigation container 320px*/
margin-left:1.2%; /* moves the menu to the right */
}
* html #nav{position:absolute;} /* effects each list item */[COLOR="#0000CD"]Why does this line start with an "*"?[/COLOR]
#navli{font-size: 100%;margin:0 0 5px;
list-style:none;}
#nav a,#nav a:link,#nav a:visited {
color: #FFF;
list-style: none;
text-decoration: none;
/* border-bottom: 1px solid #fff; */
font-size: 70%; display: block; /* changes font size */
padding: 0.2em 0 0.4em 0.5em; /* effects line height */
/*border-left: 16px solid #000; /*#711515; */
/*border-right: 1px solid /*#711515;*/
background-color: ; color: #0CF; /* changes list text color;*/
}
#nav li a:hover{background-image:url(images/menubkrnd2.png);
width: 240px; /* width of background image */
color: #FFF; /* color of background */
} /* hover text color */
/********************NAVIGATION ENDS HERE***************/
Thanks . . . Rick