As a beginner in coding, I am seeking help for what seems to be a simple error in my code. Any assistance would be highly appreciated!
I am currently working on a website where the navigation bar initially appears as a small centered box with the company logo, the word "Navigation" underneath it, and a small ">" arrow to the right of the logo.
Upon hovering over the box, it expands into a wider rectangle with an enlarged logo on the far left. The word "Navigation" remains below the logo, while the arrow disappears. I managed to achieve the logo switch and hide the arrow using Dreamweaver's Behaviours panel. The expanding nav box was created using :hover.
Now, my goal is to have 4 Nav links show up when the box is expanded, which once again I achieved through Behaviours. The issue I'm facing is that the links are appearing below the box instead of inside it. Despite hours of online research, I haven't been able to resolve this problem.
View screenshots of the current state
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images) { if(!d.MM_p) d.MM_p = new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if(a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }}
}
// Remaining JavaScript functions and CSS styling omitted for brevity
</script>Update: Here is the current display after changing the inline properties of .Nav and #Navlinks