I want to change my menu so that when you hover over the images on the menu, text appears in the box on the left of the images saying what it is.
Link to Page
Below is the
CSS code for the menu.
- Code: Select all
#menu {
margin: 0;
padding-left: 0px;
padding-top: 6px;
width:599px;
overflow:hidden;}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
margin-left:5px;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover span {
display:block;
cursor:pointer;
float:left;
background-color:#D7CAC1;
border: solid #ffffff 1px;
height:18px;
padding-top:5px;
padding-right:5px;
}
#menu .h2 {
padding-left:5px;
color:#000000;
font-size:12px;}
#menu .box {
display:block;
margin-left: 5px;
float:left;
background-color:#BFAC9B;
border: solid #ffffff 1px;
height:18px;
padding-top:5px;
padding-right:5px;
padding-left:5px;
color:#ffffff;}
Below is the
HTML code minus some of the menu links.
- Code: Select all
<div id="portfoliomenu">
<ul id="menu">
<li>
<span class="box">
Use these links to view my work
</span>
</li>
<li>
<a href="autopond.html">
<img src="Links/Autopond.gif" alt="Clock" title="Alarm Clock" />
<span class="h2">
Auto Pond
</span>
</a>
</li>
</ul>
I tried position:fixed, for the H2 span but of cause that when if the browser is smaller or made thinner, the span would then be in the wrong position.
Thanks Mike
Help with CSS menu
Jun 22nd, 2007, 09:52
Similar Threads
