function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ellen_eEllen_e 

VF Three Layer HTML menu and iFrame Help

Hello,

 

I am building a VF page for the purpose of easily navigating custom reports. I am just starting to learn code and could use an extra set of eyes to help identify my errors.

 

The two issues being:

 

1. The third layer of the menu is not appearing upon hover (I have tried many combinations of css code)

2. The initial link opens in the iFrame, but the 2nd later links open as separate tabs.

 

<apex:page sidebar="false" showHeader="false">
     <body>
    <html>
    <style>

.top head {font-size: 40px; text-align: center; font-family: Verdana, sans-serif;}

.nav ul {list-style: none; margin: 0px; font-family: verdana, sans-serif; text-align: center;}

.nav li {float:left; width:200px background-color:#444444; text-align: center; 
          boarder-right:1px solid white; position:relative; height:30px; line-height:30px;}

.nav li ul li {float:none; width:200px; text-align:center; padding-left:5px; boarder-tip:1px solid white;}

.nav a {text-decoration:none; color:black; text-align: center;}
.nav li ul {position:absolute; top:30px; left:0; visibility:hidden;}

.nav li:hover {background-color:yellow;}
.nav li:hover ul {visibility:visible;} 

<body>

<div class="nav">

<ul> 
    <li>  
        <a> Summary </a>
        <ul>
            <li><a href="www" target="theIframe">Volume </a></li>
		<ul>
			<li><a href="www" target="theIframe">Overall</a></li>
		</ul>
            <li><a href="www" target="theIframe"> ASP </a></li>
        </ul>

</ul>
</div> 

 <br/><br/><br/><br/>
       <iframe src="www" scrolling="true" id="theIframe" width="90%" align="center"/> 
     

</body>
</html>
</apex>

  I really appreciate any help or links to further resources!