css - Why does the navbar change position when using the dropdown menu? -

I have some issues with the navigation bar from the navigation bar, when the dropdown menu appears, the status of the navigation bar changes. Also the browser changes the size when changing the navigation bar. This is not my intention really, can anyone help me? I greatly appreciate

This is my CSS code I am using.

  / * Main menu * / .nav-top {list-style: none; } Ul.nav-top ul {margin-top: -40px; Margin-bottom: -50px; Margin-left: -21px; Margin-right: -50; Status: Relative; display none; } Ul.nav-top li {display: inline-block; Padding: 40px; Margin-right: 19px; Status: Relative; } Ul.nav-top li: Hover & gt; Ul {display: block; } Ul.nav-top li a {display: block; Text-decoration: none; Border bottom: 2px solid transparent; } Ul.nav-top a: Hover {Color: # 686A6A; Border-bottom: 2px solid # E4E4E4; } / * Sub menu * / ul.nav-top ul ul {clear: both; Border: Solid 1px ffffff; } Ul.nav-top li {display: block; / * Introducing a padding between li and giving items of an illusion place * / padding: 2px; Cushion Top: 10px; } Ul.nav-top ul ul li {} ul.nav-top ul ul {white-space: nowrap; / * Stop text wrapping and multi-line dropdown items * / ul.nav-top ul ul li: Make a hover. {Continuous hover states) However, before hovered, create a global style for the link. Here we undo these effects. * / Text-decoration: None; Background: #fff; } Ul.nav-top ul ul li: hover a: hover {/ * Here we define the most obvious hover states - what happens when you hover each individual link * / color: # 686A6A; Border-bottom: 2px solid # E4E4E4; }  

Thank you for your reply. This is my html:

  & lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "header" & gt; & Lt; Img src = "images / logo-marco-kaller.png" & gt; & Lt; Ul class = "nav-top" & gt; & Lt; Li & gt; & Lt; A href = "home.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "about.html" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Work & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Design & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Painting & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Sculptures & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Li & gt; & Lt; A href = "shop.html" & gt; Shop & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "news.html" & gt; News & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "contact.html" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "background" & gt; & Lt; / Div & gt; & Lt; Div class = "wrapper" & gt; & Lt; Div id = "content-background" & gt; & Lt; Br> & Lt; H1 & gt; Marco Kaller & lt; / H1> & Lt; P & gt; Welcome to the site of Marco Kaller! & Lt; / P & gt; & Lt; Div id = "content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; A href = "#" & gt; & Lt; Img width = "25" height = "25" alt = "Facebook Marko Keller" src = "picture / facebook.png" /> & Lt; / A & gt; & Lt; Ul class = "talen" & gt; & Lt; Li & gt; Language: & lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; N & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Nl & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; D & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Hour class = "feed" /> & Lt; / Div & gt;