Utilize padding on the unordered list items within parent elements

Is it possible to apply the margins of child li elements to the parent li elements as well? Currently, the submenu under "Projekte" is overlapping with "Kontakt" below. Any assistance would be greatly appreciated!

#hide {
  display: none;
}

#projekte:hover #hide {
  display: block;
}

li {
  width: 80px;
  height: 30px;
  border-bottom: 1px solid;
  margin-top: 50px;
}

a {
  color: grey;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

a:hover {
  color: blue;
}
<h1>Navigationsmen&uuml;</h1>
<br />
<br />
<ul>
  <li><a href="">Home</a></li>
  <li id="projekte">
    <a href="projektuebersicht.html">Projekte</a>
    <ul id="hide">
      <li><a href="projekt1.html">Projekt 1</a></li>
      <li><a href="projekt2.html">Projekt 2</a></li>
    </ul>
  </li>
  <li><a href="mailto:">Kontakt</a></li>
</ul>

htmlcsshtml-lists

Answer №1

To create an offset effect and adjust the position of elements, you can include position parameters in #projekte:hover #hide: position: relative. This will allow you to set specific values for top and left:

#hide {
  display: none;
}

#projekte:hover #hide {
  display: block;
  position: relative;
  left: 60px;
  top: -230%;
}

li {
  width: 80px;
  height: 30px;
  border-bottom: 1px solid;
  margin-top: 50px;
}

a {
  color: grey;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

a:hover {
  color: blue;
}
<h1>Navigationsmen&uuml;</h1>
<br />
<br />
<ul>
  <li><a href="">Home</a></li>
  <li id="projekte">
    <a href="projektuebersicht.html">Projekte</a>
    <ul id="hide">
      <li><a href="projekt1.html">Projekt 1</a></li>
      <li><a href="projekt2.html">Projekt 2</a></li>
    </ul>
  </li>
  <li><a href="mailto:">Kontakt</a></li>
</ul>

Answer №2

To make this work effectively, you need to include margin for the #projekte:hover #hide li element

<body>
    <h1>Navigation Menu</h1>
    <br />
    <br />
    <ul>
        <li><a href="">Home</a></li>
        <li id="projekte">
            <a href="projectoverview.html">Projects</a>
            <ul id="hide">
            <li><a href="project1.html">Project 1</a></li>
            <li><a href="project2.html">Project 2</a></li>
            </ul>
        </li>
        <li><a href="mailto:">Contact</a></li>
    </ul>       
</body>

#hide {display: none;
            
            
    }
    #projekte:hover #hide {display: block;}
    li {width: 80px;
        height: 30px;
        border-bottom: 1px solid;
        margin-top: 50px;
        
    }
    a {color: grey;
        text-decoration: none;
    }
    ul {list-style-type: none;
    }
    a:hover {color:blue;}
    
    #projekte:hover #hide li {
    margin-left: 80px;
    margin-top: 20px;
}

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

Retrieve the checkbox-success value for each row in the mvc table

I am facing an issue with retrieving the id of each table row when using the bootstrap checkbox-success. However, the normal checkbox allows me to successfully obtain the correct Id for each row. Can anyone assist me in troubleshooting my JavaScript code? ...

javascriptcssasp.net-mvcbootstrap-4

What is the best way to loop through JQuery Selector elements and add additional information?

I've created a jQuery selector that targets 15 specific types of html "td" elements within my rendered HTML Dom: var parentElement = jQuery('.myClassSelector').parent(); This jQuery code provides me with the total number of selected elemen ...

javascriptjqueryhtml

Is there a way to set a custom background image for a specific Vaadin view?

I am developing a view in Vaadin that looks something like this... public class PosAppPickerView extends VerticalLayout implements View { Everything is functioning smoothly, but I am interested in incorporating an image as the background for the body/mai ...

cssvaadinvaadin7

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

javascripthtmlcsssliderswiper.js

The Combination of Bootstrap 4 and the jQuery Validation Plugin

Currently, I am in the process of working on a project that requires me to implement a simple form validation on the client side. After some research, I decided to use the jQuery validation plugin. While experimenting with some basic functionalities, I enc ...

jqueryhtmlformsjquery-validatebootstrap-4

Can a responsive website link to a native app?

I've hit a dead end and my sleuthing skills on search engines have run dry. What's the term for the link that directs users to your native app in the AppStore or Google Play from your responsive website? When a user doesn't have your nativ ...

htmliosresponsive-designapp-store

Unable to utilize CSS3 features within visual studio 2010

While working on website design using Visual Studio 2010 service pack 1, I encountered an issue where I cannot utilize CSS3. Despite attempting to incorporate border properties for the front page, I kept receiving an error message stating that it is ' ...

c#asp.netvisual-studio-2010css

Efficiently Embedding Images into Canvas Elements

I am struggling with loading individual photos from an array into "canvas" tags. In my function, I generate multiple sets of "div" tags with a "canvas" tag inside them, but I'm facing difficulties in inserting images from an array into these "canvas" ...

javascripthtmlcanvasfor-loop

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

jqueryhtmlasp.netajaxasp.net-mvc

Steps for inserting an icon tag within a text input field

In this section, I have created a div class that contains an image tag to display the profile picture. Following that, there is a <TextInput> element styled using CSS. Outside of the <TextInput/>, there is a custom button for submitting posts. ...

javascriptcssreactjsnode.jstailwind-css

Numerous floating elements are being displaced by the left-aligned ones, causing disarray in the layout

Here is the code snippet I'm having trouble with: html: <div class="left">left</div> <div class="left">left</div> <div class="left">left</div> <div class="right">right</div> <div class="right">ri ...

csscss-float

Ensuring Message Accuracy with Selenium in C# Development

I am a beginner in the world of test automation and I am looking to retrieve the value from a web element labeled "message-success failed", which displays the message "This customer name already exists". Here is what the CSS looks like Even though I atte ...

c#cssselenium

Is Jsoup receiving the HTML incorrectly?

Currently, I am utilizing Jsoup to fetch HTML data from a website and attempting to display it in a ListView within my app. Although the application compiles without any errors, clicking the button results in an empty ListView. In my opinion, this issue ...

javaandroidhtmllistview

Why is it necessary to utilize absolute positioning in CSS?

Check out this link According to the link, an element with absolute positioning is placed in relation to its first parent element that has a position other than static. If no such element exists, then it refers to the containing block which is <html& ...

htmlcss

Utilizing Cookies in PHP to keep track of site visits

I'm a newbie to PHP and struggling with using Cookies! My goal is to create a cookie that tracks the number of times a page is loaded within a one-minute lifetime. Once the minute is up, the cookie should be unset and the counter reset to 0. Here&apo ...

phphtmlcookiessession-cookies

Tips for changing the text color to stand out from the color of the input field

My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but ...

cssreactjs

Understanding how to activate a React navbar button is essential for creating a seamless user

How can I make my sidebar button change color when I navigate to the page it links to? ...

javascripthtmlsassreact-redux

Customize CSS styles based on Angular material stepper orientation

Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...

cssangularangular-material

Compiling and rendering HTML code from a file with AngularJS

Here is the custom directive code that I have created: angular.module('app.directives', []).directive('userHeader', ['authService', '$compile', function(authService, $compile) { return { restrict: 'AEC&ap ...

javascripthtmlangularjs

Is there a way to conceal the horizontal divider in the login form of the ionic HTML mobile user interface?

While designing this login form on the HTML ionic mobile UI, everything looks good except for one thing - I want to hide the horizontal line that appears between the "Forgot Password" label and the LOGIN button. Is there a way to do this? Login.html: < ...

androidhtmlangularionic-frameworkmobile