Please create a gap between the main menu and the dropdown menu

I can't seem to create some space between my top navigation menu and the dropdown list (when hovered). Check out this screenshot for reference: the lack of space is making it look cluttered

I attempted to add a margin-top: 10px; to the css of the dropdown, but it ended up disabling the hover effect.

Below is my code snippet:

.header {
                position: relative;
                top: 0; left: 0; right: 0;
                width: 100%;
                height: 140px;
                line-height: 140px;
                background-color: #060930;
            }

            .header .btn {
                display: inline-block;
                vertical-align: middle;
                line-height: normal;
                margin-left: 2%;
            }

            .ad, .arch, .abt {
                font-family: 'product_sansbold';
                font-weight: normal;
                font-style: normal;
                background-color: transparent;
                border: transparent;
                cursor: pointer;
                margin: 0 4px;
            }

            .ad {
                color: #FBF3FF;
                font-size: 32px;
            }

            .arch, .abt {
                color: #a1a6e6;
                font-size: 18px;
            }

            .arch:hover, .abt:hover {
                transition-duration: 0.3s;
                color: #d7daff;
            }
            .arch:active, .abt:active {
                color: #d7daff;
            }

            .dropdown {
                position: relative;
                display: inline-block;
            }

            .dropdown-cont {
                display: none;
                position: absolute;
                background-color: #a1a6e6;
                min-width: 160px;
                border-radius: 6px;
                z-index: 1;
            }

            .dropdown-cont a {
                font-family: 'product_sansbold';
                color: #060930;
                padding: 14px 16px;
                text-decoration: none;
                display: block;
            }

            .dropdown:hover .dropdown-cont {
                display: block;
                background-color: #a1a6e6;
            }

            .dropdown-cont a:hover {
                text-decoration: underline;
            }
<!DOCTYPE html>

<div class="header">
            <div class="btn">
                <button class="ad" type="button" onclick="window.location.href='index.html'"><b>AD.</b></button>
                <div class="dropdown">
                    <button class="arch" type="button" onclick="window.location.href='archive.html'"><b>Archive</b></button>
                    <div class="dropdown-cont">
                        <a href="stories.html">Stories</a>
                        <a href="photos.html">Photos</a>
                    </div>
                </div>
                <button class="abt" type="button" onclick="window.location.href='about.html'"><b>About</b></button>
            </div>
        </div>
        
</html>

htmlcss

Answer №1

If you want to achieve the desired effect, consider using a border instead of a margin. Applying a margin will shift the entire element down, causing it to disappear once you stop hovering over it. I have set a border of 10px, but feel free to adjust this value to suit your preferences.

.header {
                position: relative;
                top: 0; left: 0; right: 0;
                width: 100%;
                height: 140px;
                line-height: 140px;
                background-color: #060930;
            }

            .header .btn {
                display: inline-block;
                vertical-align: middle;
                line-height: normal;
                margin-left: 2%;
            }

            .ad, .arch, .abt {
                font-family: 'product_sansbold';
                font-weight: normal;
                font-style: normal;
                background-color: transparent;
                border: transparent;
                cursor: pointer;
                margin: 0 4px;
            }

            .ad {
                color: #FBF3FF;
                font-size: 32px;
            }

            .arch, .abt {
                color: #a1a6e6;
                font-size: 18px;
            }

            .arch:hover, .abt:hover {
                transition-duration: 0.3s;
                color: #d7daff;
            }
            .arch:active, .abt:active {
                color: #d7daff;
            }

            .dropdown {
                position: relative;
                display: inline-block;
            }

            .dropdown-cont {
                display: none;
                position: absolute;
                background-color: #a1a6e6;
                min-width: 160px;
                border-radius: 6px;
                z-index: 1;
                border-top: 10px solid #060930;
            }

            .dropdown-cont a {
                font-family: 'product_sansbold';
                color: #060930;
                padding: 14px 16px;
                text-decoration: none;
                display: block;
            }

            .dropdown:hover .dropdown-cont {
                display: block;
                background-color: #a1a6e6;
            }

            .dropdown-cont a:hover {
                text-decoration: underline;
            }
<!DOCTYPE html>

<div class="header">
            <div class="btn">
                <button class="ad" type="button" onclick="window.location.href='index.html'"><b>AD.</b></button>
                <div class="dropdown">
                    <button class="arch" type="button" onclick="window.location.href='archive.html'"><b>Archive</b></button>
                    <div class="dropdown-cont">
                        <a href="stories.html">Stories</a>
                        <a href="photos.html">Photos</a>
                    </div>
                </div>
                <button class="abt" type="button" onclick="window.location.href='about.html'"><b>About</b></button>
            </div>
        </div>
        
</html>

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

When attempting to display or hide elements within a function, the foreach loop only chooses the last variable when referencing the `div`

As I navigate through a straightforward foreach loop to retrieve "blog posts", the page displays basic information about each post along with a 'reply' and 'delete' button. Clicking on the 'reply' button reveals a small form b ...

javascriptphphtmlcsssql

Modifying images through resizing and scaling within a flexible web application to accommodate different screen dimensions

With my web application, I have an image that changes in sizes as it calls a different image from the database each time it is viewed. My goal is to make sure this image is displayed responsively on different devices. For smartphones, I want the image to f ...

htmlimagecssresizeresponsive-design

Is Bootstrap Hover Class Inadvertently Included Without Cause?

I am in the process of creating a very basic navigation bar. Bootstrap has been incorporated into my project, along with my custom stylesheet. I believe there is only one bootstrap class on my page. Despite adding a customized hover effect, when hovering o ...

htmlcssnode.jstwitter-bootstrapejs

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

I have encountered an issue with my rows breaking improperly when viewing them in a PDF format, particularly when I include a minus

Whenever I try to view my HTML page in PDF form, I encounter an issue. The problem arises when the numerical values are too large, causing a line break between the minus sign and the values. Here is an example of the HTML page which appears perfectly: ent ...

javascriptpythonhtmlpdfwkhtmltopdf

JS form submission problem

Seeking advice on developing a functional contact form using HTML, CSS, and JavaScript. All conditions currently validate properly, but encountering an issue with error messages persisting after re-entering the required fields. Additionally, looking to red ...

javascripthtmlcssfrontendbootstrap-5

Error in zone: 140 - Property 'remove' is not readable

I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...

javascriptjqueryhtmlangularkendo-ui

Move your cursor over an image within a div container

After not finding any helpful answers on this topic, I've decided to ask for help again. My issue involves having an image inside a div. <div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" wid ...

jqueryhtmlcss

I am unable to access the Xml data using VBA's `selectsinglenode` function as it is returning nothing

Below is the XML data: <NewZipCdListResponse> <cmmMsgHeader> <requestMsgId/> <responseMsgId/> <responseTime>20220526:085103847</responseTime> <successYN>Y</successYN> <returnCode>0 ...

htmlexcelxmlvbahttp

Is it possible to edit multiple classes simultaneously in Bootstrap?

After creating a div with the class container and adding 50px padding to the top, I am now ready to add another container using Bootstrap's CSS. Do I need to create a new class like container-2 to edit the new container's style or are there multi ...

htmlcssbootstrap-4

Transforming HTML code into a structured object

The provided code snippet includes HTML markup that needs to be transformed into a specific format. <html> <head> <title>Hello!</title> </head> <body> <div class=”div1”> <h1>This is a ...

javascriptarrayshtmlobject

Troubleshooting audio playback issues with create-react-app's componentDidMount method

When I set up my create-react-app project, I successfully imported jQuery as $ and used it in the componentDidMount() lifecycle hook. Within the render() method, I included: audio ref="bgAudio" source src={this.state.bgAudio} and initialized the stat ...

javascripthtmlreactjsaudio

How to send an email using asp.net and html

This is the form on my index.aspx page. <form role="form" method="post" action="SendMail.aspx"> <div class="form-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> ...

htmlasp.net

Bone structure template - optimizing list spacing with CSS

Currently, I am attempting to float my navigation bar further towards the left by at least 200px, closer to the end of the line visible below. However, every time I add a margin or padding, it causes the elements within the navigation bar to stack on top o ...

htmlcsslistalignment

Having trouble making the swing effect trigger on mouseover but not on page load

I am trying to achieve a swinging effect on mouseover only, not on page load. Below is the JS code I have: (function swing() { var ang = 20, dAng = 10, ddAng = .5, dir = 1, box = document.getElementById("box"); (function setAng(ang){ ...

javascriptjqueryhtml

What could be causing my php code to fail to trigger an alert when using Ajax technology?

As a novice in web programming, I have successfully created a website but now I am facing challenges while trying to integrate a database. Despite having everything properly set up, my ajax function doesn't seem to be working and I can't figure o ...

javascriptphphtmlajax

Ways to display or conceal text based on chosen options from a select box without using javascript

Is there a way to display different text based on selection from a dropdown menu without using javascript? I attempted the code below, but it still relies on the onchange event. <div> <select onchange="if(selectedIndex!=0)document.getElement ...

htmlcssbootstrap-4css-selectors

the width of the table body is narrower than the table itself

I'm working on a table that has a fixed first column and needs to be vertically scrollable. I'm almost there with my CSS code, but the table rows are not as wide as the columns and I'm unsure why this is happening. .table th:first-child, ...

javascripthtmlcss

Is it impossible to create links to any Django admin templates other than index.html?

Currently working on setting up a link that directs users to Django's admin/auth/user/add/ in order to allow them to create a new account for logging in. However, I have encountered an issue where setting href="{% url 'admin:index' %}& ...

htmldjango

unable to retrieve real-time data using a search bar

I'm working on a drop-down menu of locations/Regions with a search box nested inside. https://i.sstatic.net/liWpP.png The image shows a list of places followed by regions. The region section is static, while the rest of the places are fetched from a ...

phphtmltwitter-bootstrapsearchdropdown