0

hi,

how can i create a css menu/navigation that does this? - see attached photo..

upload

here is my current html -

<div id="content2" style=" width:524px; height:320px;"> 
   <ul>
      <li><a href="about.php"><img src="graphics/about.png" width="148" height="101" border="0"></a>
         <ul>
            <li>about me</li>
         </ul>
      </li>

   <li><a href="news.php"><img src="graphics/news.png" width="147" height="101" border="0"></a>

       <ul>
          <li>news</li>
       </ul>
   </li>

   <li><a href="comingsoon.php"><img src="graphics/coming soon.png" width="148" height="101" border="0"></a>

      <ul>
         <li>coming soon</li>
      </ul>

   </li>
   </ul>
</div>

Here is my current css -

#content2 ul{
    margin:0px;
    padding:0px;
}

#content2 li{
    display:inline;
    margin:0px;
    padding:0px;
    list-style:none;
    float:left;
}

#content2 li a{

}

#content2 li a:hover{

}

#content2 ul ul{
    position:absolute;
    visibility:hidden;
    top:250px;
    height:200px;
    width:250px;
    background-color:#373737;
}

#content2 ul li:hover ul{
    visibility:visible;
}

the current problem is that the content is going directly underneath each image when cursor is hovered over the images

any help would be much appreciated!

Edited by ben.matthews18

2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by dany12
0

an example of what i'm trying to do can be seen here -
Link

if you click each eeadint the text changes

Edited by ben.matthews18

0

Your answer is jquery and you have to change the div content each time you hover over your menu
Learn it and love it

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.