Drop-down menu positioning

HTML & CSS
1

So I have this problem… I was working on a drop down menu but when I hover over it moves all the content down. I suppose it’s an issue with positioning, but I cannot locate the issue, so I’d need your help. Also the alignment of the sub-menu list items is off.

Here’s the code:

Thanks for help

2

You can solve the problems by making a couple of changes to the CSS. Keep in mind that I changed your <nav> tag to <div id=“nav”> but I am sure you can find the right places to put this.

/* Add this */
#nav ul {
padding:0px;
}

/* Change the line-height to 50px */
#nav{
text-align: right;
display: inline-table;
font-family: ‘Open Sans Light’, sans-serif;
font-size: 25px;
line-height:50px;
}

/* remove the 15px margin here */
#nav a{
font-family: ‘Open Sans Light’, sans-serif;
font-size: 25px;
color: #000;
}

/* reduce the width of the li here
#nav ul ul{
margin-top: 5px;
display: block;
width: 113px;
background-color: rgba(255,255,255,0.8);
}

You will also need to change the HTML as follows to position the “|” characters.


  <li><a alt="novinky" href="novinky.html">Novinky</a>[B][COLOR="#0000FF"] &nbsp;|&nbsp;[/COLOR][/B]</li>
  <li><a alt="fairtrade" href="novinky.html">Fair trade</a>[B][COLOR="#0000FF"] &nbsp;|&nbsp; [/COLOR][/B]
3

Ok, thanks. I’ve got it sorted now…