Dropdownmenü soll Größe von Menüleiste übernehmen

Drachenklatscher · 28. Dezember 2019

Hallo!

Bin noch ziemlich unerfahren in Sachen HTML und CSS und erstelle derzeit meine erste Webseite.

Hätte irgendwer ne Ahnung wie ich mein Dropdownmenü an der Größe des oberen Elements anpassen kann? So dass wenn das Fenster kleiner wird und damit die Boxen der Menüleiste, auch das Dropdownmenü sich darauf anpasst, das darunter liegt?

HTML: Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Zeitvertreib</title>
<meta name="description" content="Eine Website, die gegen Langeweile hilft">
<meta name="author" content="">
<meta name="editor" content="html-editor phase 5">
<link href="format.css" type="text/css" rel="stylesheet">
<script src="https://kit.fontawesome.com/38ded5bd55.js" crossorigin="anonymous">
</script>
</head>
<body> 
       <text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#000000">

<div class="box-one">
         <img src="logo.jpg" width="100%">
</div>
<div class="box-two">
<nav class="menu">
    <ul class="menu">
        <li>
            <a href="#">
                <div class="icon">
                <i class="fas fa-home" aria-hidden="true"></i>
                <i class="fas fa-home" aria-hidden="true"></i>
                </div>
                <div class="name"><span data-text="Startseite">Startseite</span></div>
            </a>
        </li>    
        <li>
            <a href="#">
                <div class="icon">
                    <i class="fas fa-gamepad" aria-hidden="true"></i>
                    <i class="fas fa-gamepad" aria-hidden="true"></i>
                </div>
                <div class="name"><span data-text="Spiele">Spiele</span></div>
            </a>
                <ul class="dropdown">
                    <div class="Inhalt">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    </div>
                </ul>
        </li>
        <li>
            <a href="#">
                <div class="icon">
                    <i class="fas fa-play" aria-hidden="true"></i>
                    <i class="fas fa-play" aria-hidden="true"></i>
                </div>
                <div class="name"><span data-text="Videos">Videos</span></div>
            </a>
                <ul class="dropdown">
                    <div class="Inhalt">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    </div>
                </ul>
        </li>
        <li>
            <a href="#">
                <div class="icon">
                    <i class="fas fa-image" aria-hidden="true"></i>
                    <i class="fas fa-image" aria-hidden="true"></i>
                </div>
                <div class="name"><span data-text="Bilder">Bilder</span></div>
            </a>
                <ul class="dropdown">
                    <div class="Inhalt">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    </div>
                </ul>
        </li>
        <li>
            <a href="#">
                <div class="icon">
                    <i class="far fa-laugh-squint" aria-hidden="true"></i>
                    <i class="far fa-laugh-squint" aria-hidden="true"></i>
                </div>
                    <div class="name"><span data-text="Witze">Witze</span></div>
            </a>
                <ul class="dropdown">
                    <div class="Inhalt">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    </div>
                </ul>
        </li>
        <li>
            <a href="#">
                <div class="icon">
                    <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
                    <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
                </div>
                    <div class="name"><span data-text="Mehr">Mehr</span></div>
            </a>
                <ul class="dropdown">
                    <div class="Inhalt">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 1</a></li>
                    </div>
                </ul>
        </li>
    </ul>
</nav>
</div>
</body>
</html>

Alles anzeigen

CSS: Code

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 20;
  height: 10000px;
}

nav {
    background-color: #FEFF99;
}

nav ul  {
    position: relative;
    top: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    margin-top: 30px;
    padding: 0px 0px ;
    background: #FF6600;
    display: flex;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

nav ul li {
    list-style: none;
    text-align: center;
    display: block;
    flex: 1 1 0;
    position: relative;
    border-right: 1px solid rgba(0,0,0,0.2);
}

nav ul li:last-child {
    border-right: none;
}

nav ul li a {
    text-decoration: none;
    padding: 0 20px;
    display: block;
}

nav ul li a .icon {
    width: 47px;
    height: 40px;
    text-align: center;
    background: #FF6600;
    overflow: hidden;
    margin: 0 auto 10px;
}

nav ul li a .icon .fas {
    width: 100%;
    height: 100%;
    line-height: 40px;
    font-size: 34px;
    transition: 0.5s;
    color: #FFFFFF;
}

nav ul li a .icon .far {
    width: 100%;
    height: 100%;
    line-height: 40px;
    font-size: 34px;
    transition: 0.5s;
    color: #FFFFFF;
}

ul li a .icon .fas:last-child {
    color: #000000;
}

ul li a .icon .far:last-child {
    color: #000000;
}

ul li a:hover .icon .fas {
    transform: translateY(-100%);
}

ul li a:hover .icon .far {
    transform: translateY(-100%);
}

ul li a .name {
    position: relative;
    height: 20px;
    width: 100%;
    display: block;
    overflow: hidden;
}

ul li a .name span {
    display: block;
    position: relative;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 20px;
    transition: 0.5s;
    
}

ul li a .name span:before {
    content: attr(data-text);
    position: block;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    color: #000000;

}

ul li a:hover .name span {
    transform: translateY(20px);
    }
        
/* DROPDOWN */
    
    ul li:hover .name span, ul li:focus .name span {
    transform: translateY(20px);
    }
    
    ul li:hover .icon .fas {
    transform: translateY(-100%);
    }

    .dropdown li:hover .icon .far {
    transform: translateY(-100%);
    }
    
    ul .Inhalt {
    background: #FEFF99;
    box-shadow: 0 0px 0px rgba(0,0,0,0);
    }
    
    .dropdown li{
        display:block;
       
        position: relative;
        text-decoration: none;
        transition-duration: 500ms;
        color: #fff;
        border-top: 1px solid rgba(0,0,0,0.2);
    }
    
    .dropdown li a{
        color: inherit;
    }
    
    .dropdown li:hover,
    .dropdown li:focus{
        color: black;
        cursor: pointer;
        font-family: sans-serif;
        
        
    }
    
    .dropdown{
        position: absolute;
        transition: background-color 0.5s ease-in;
        margin-top: 58px;
        display: none;
        width: 100%;
    }

    
    
    ul li:hover > ul,
    nav ul li:focus > ul,
    ul li ul li:hover,
    ul li ul li:focus{
        opacity: 1;
        display: inline-block;
        box-shadow: 0 0px 0px rgba(0,0,0,0);
    }
    
    /*nav ul li ul li {
        clear: both;
        width: 100%;
        animation: animate 800ms forwards;
        
        
    }*/
    
    nav ul li ul li:nth-of-type(1){
        transform-origin: top center;
        transform: skewX(0deg) scaleY(0);
        box-shadow: 0px 10px 10px rgba(0,0,0,.2);
    }
    
    nav ul li ul li:nth-of-type(2){
        transform-origin: top center;
        transform: skewX(0deg) scaleY(0);
        animation-delay: 150ms;
        box-shadow: 0px 10px 10px rgba(0,0,0,.2);
    }
    
     nav ul li ul li:nth-of-type(3){
        transform-origin: top center;
        transform: skewX(0deg) scaleY(0);
        animation-delay: 300ms;
        box-shadow: 0px 10px 10px rgba(0,0,0,.2);
    }
    
 nav ul li ul li:nth-of-type(4){
       transform-origin: top center;
        transform: skewX(0deg) scaleY(0);
        animation-delay: 450ms;
        box-shadow: 0px 10px 10px rgba(0,0,0,.2);
    }

     nav ul li ul li:nth-of-type(5){
        transform-origin: top center;
        transform: skewX(0deg) scaleY(0);
        animation-delay: 600ms;
        box-shadow: 0px 5px 20px rgba(0,0,0,.2);
    }

    @keyframes animate{
        to{
            transform: skewX(0deg) scaleY(1);
        }
    }
.box-one { 

}

.box-two {

    
}

.box-three {

background-color: #FEFF99;
height: 9000px;
    }

Alles anzeigen

Vielen Dank schon einmal^^

Dropdownmenü soll Größe von Menüleiste übernehmen

Jetzt mitmachen!

Teilen

Tags