What causes the navigation bar to shift its position while utilizing the dropdown menu?

I am facing some issues with the navigation bar on my website. The position of the navigation bar shifts when the dropdown menu is displayed. Additionally, resizing the browser also causes changes in the navigation bar layout. This is not what I intended, so I would really appreciate it if someone could help me resolve this problem.

Below is the CSS code that I am currently using:

/*main menu*/

.nav-top  {list-style:none;               
}
ul.nav-top ul { margin-top:-40px; margin-bottom:-50px; margin-left:-21px; margin-right:-50;
               position: relative; display:none; }

ul.nav-top li { display:inline-block;
                padding:40px; 
                margin-right:19px;
                position:relative;
}
ul.nav-top li:hover > 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 li {
    display:block;
    padding:2px; padding-top:10px;
} 

ul.nav-top ul ul li {   
}

ul.nav-top ul ul a{
    white-space:nowrap; 
}

ul.nav-top ul ul li:hover a{ 
    text-decoration:none; background:#FFF; 

}
ul.nav-top ul ul li:hover a:hover{ 
    color:#686A6A; border-bottom:2px solid #E4E4E4;   
}
css

Answer №1

Appreciate your response. Here is the HTML code I have:

</head>

<body>

<div id="header">

<img src="images/logo-marco-kaller.png">

    <ul class="nav-top">
    <li><a href="home.html">home</a></li>
    <li><a href="about.html">about</a></li>
    <li><a href="#">work</a>
        <ul>
             <li><a href="#">design</a></li> 
             <li><a href="#">paintings</a></li>   
             <li><a href="#">sculptures</a></li>           
        </ul>    
    <li><a href="shop.html">shop</a></li>
    <li><a href="news.html">news</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
</div>

 <div id="background"></div>


  <div class="wrapper">   

  <div id="content-background"><br>
 <h1>Marco Kaller</h1> 
 <p>Welcome to Marco Kaller's site!</p>

  <div id="content">
  </div> 
  </div>
</div>

  <div id="footer">   
    <a href="#"><img width="25" height="25" alt="facebook Marco Keller" src="images/facebook.png" /></a>

     <ul class="talen">
     <li>language:</li>
     <li><a href="#">en</a></li>
     <li><a href="#">nl</a></li>
     <li><a href="#">de</a></li>
     </ul>
       <hr class="faded" />
     </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with vendor CSS not being recognized during brunch compilation

I am currently exploring the use of Pure.css in my application. After installing it via npm, I have configured my brunch-config.js as follows: stylesheets: { joinTo: { 'app.css': /^app/, 'vendor.css': /^(?!app)/ } } At thi ...

cssbrunch

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

javascriptjqueryhtmlcss

What is the reason behind a stationary lightbox sticking to the top of the webpage rather than the top of the viewport?

When you visit this page and scroll down a little before clicking on one of the art pieces, have you noticed that the "fixed" lightbox seems to be attaching itself to the top of the page instead of the viewport? I'm looking for ways to make it attach ...

htmlcss

Ensuring a consistently positioned footer at the bottom

I understand that this might not seem like a significant issue, but I'm encountering some difficulties. In my main.html file, there are three divs. The first div contains the navigation bar, the second div is an "empty" div that uses JQuery/Javascript ...

javascriptjqueryhtmlcss

The body's width is more compact compared to one of my containers in HTML/CSS

After completing my code for a beginner's HTML/CSS project, I realized that the main parent container holding two smaller containers needed to be set at specific widths. The two inner containers had to be exactly 650px and 270px wide, while the main p ...

htmlcss

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript

Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition. However, an issue arises when the rotation da ...

javascripthtmlcsstransition

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my co ...

htmlcssbootstrap-5

Apply an image as the background for the body using Bootstrap 5 styling

I'm wondering how I can set the background of the whole webpage (the body) to an image. I'd like to add a subtle fade effect to avoid it being too overpowering. <style> body { background-image:url("{% static 'portfolio ...

htmlcssdjangobootstrap-5

How to personalize cell and border spacing within the <table> HTML element

Looking to create a design similar to this https://i.sstatic.net/qONUa.png I attempted using border-spacing, but it applies between all cells. Is there a way to eliminate the space only between label and text cells? Or would using divs for the entire str ...

htmlcss

Partial functionality noticed in Bootstrap navbar CSS

I seem to be encountering a peculiar issue with Bootstrap 3.3.6 CSS, where it is only partially functioning. Despite ensuring the proper structure of the site (correct classes in the right places, etc.), it appears that some of the CSS styles are missing. ...

jqueryhtmlcsstwitter-bootstrap

Dynamic way to update the focus color of a select menu based on the model value in AngularJS

I am looking to customize the focus color of a select menu based on a model value. For example, when I choose "Product Manager", the background color changes to blue upon focusing. However, I want to alter this background color dynamically depending on th ...

javascriptcssangularjs

Is there a method for me to retrieve the current value of top from the animation function provided here?

$(".container").animate({ top: '300px', height: '60px', width: '250px',},5000).fadeOut("fast").hide("fast"); ...

jquerycssanimation

Adjusting the background hue of a bootstrap panel

I'm attempting to utilize JavaScript to change the background color of a panel in order to create a "selected" effect. Upon clicking, I retrieve the div by its ID and modify its background color. Although it initially works as intended, the backgrou ...

javascripthtmlcssdjangotwitter-bootstrap

Is it possible to conceal specific sections of a timeline depending on the current slide in view?

For my product tour, I've structured a timeline with 4 main sections, each containing 4-5 subsections. Here's how it looks: <ul class="slideshow-timeline"> <li class="active-target-main main-section"><a href="#target">Targe ...

javascriptjqueryhtmlcss

What is the best way to apply the background color from a parent div to a span element?

Is there a way to make the background color of the Reset Password section span the full width of the outer div and header section? html: <div class="forgot-inner"> <!--Forgot-header--> <div class="forgot-hea ...

htmlcss

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

cssjsfdatatable

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...

javascripthtmlcss

Is there a way for the React select component to adjust its width automatically based on the label size?

After defining a React select component, it looks like this: <FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id=&quo ...

javascripthtmlcssreactjsmaterial-ui

Fixing alignment issues in HTML and CSS using AngularJS bug-fixing

I'm attempting to create an element with inner elements that need to be justified. The issue I'm facing is that when I generate the elements with AngularJS, text-align justify doesn't work anymore. Here's an example that demonstrates ...

htmlangularjscssjustify

Collapsible feature in Bootstrap malfunctioning after initial use

I am currently developing a website using PERSONA as the CMS and have implemented collapsible elements on the page using Bootstrap. The website is using Bootstrap Version 3.3.7 and PERSONA includes an internal version of jQuery. For reference, you can acce ...

javascriptjqueryhtmlcssbootstrap-4