CODEWITHSUNDEEP
htmlcssdrop-down-menu
Skeptar
Skeptar

Reputation: 189

Dropdown menu position of the submenu

I tryed to create a simple dropdown menu, but i dont get it... I looked at some tutorials now and the position of the submenu is crap. I want a "normal" dropdown menu nothing special. The problem is maybe the position absolute, but in the tutorial he used it too. The Dropdown menu is at the secound point (Produkte). Here is my Page: Page and the Code:

*{
    padding: 0px;
    margin: 0px;
    font-family: Raleway;
    line-height: 20px;
	color: #003399;
}

body{
    background-image: url(images/hintergrund.png);
}

section{
    margin-top: 50px;
    width: 1100px;
    background: white;
    border: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
    
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #fcb774;
}

article{
    width: 100%;
}

article:after{
   content: '';
   display: block;
   clear: both;
}

.bild{
    height: 200px;
    width: 200px;
    float: left;
    border: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
    overflow: hidden;
}

.bild:hover{
    cursor:pointer;
}

.text{
    float: right;
    width: 860px;
    word-wrap: break-word;
    height: 200px;
    border: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
    background-color: white;
}

hr{
    margin-top: 50px;
    margin-bottom: 50px;
    border: 1px solid black;
}

nav{
    width: 100%;
}

nav ul{
    background-color: #fcb774;
    margin: 0px;
    padding: 0px;
    text-align: center;
	font-size: 0;
	border-bottom: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
}

nav ul li{
    display: inline-block;
	font-size: 16px;
}

nav ul li a{
    display: block;
    padding: 10px 20px 10px 20px;
    transition: all 0.5s;
    text-decoration: none;
}

nav ul li a:hover{
    background-color: white;
    text-decoration: underline;
}

.dropdown{
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}

nav ul li:hover .dropdown{
    display: block;
}
<html>
    <head>
        <title>Homepage</title>
        <link rel="stylesheet" href="index.css">
        <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
        
        
        <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <!-- include Cycle plugin -->
        <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.slide1').cycle({
                    fx: 'fade',
                    next: '.slide1',
                    timeout: 0
                });
            })
		
			$(document).ready(function() {
                $('.slide2').cycle({
                    fx: 'fade',
                    next: '.slide2',
                    timeout: 0
                });
            });
            
            $(document).ready(function() {
                $('.slide3').cycle({
                    fx: 'fade',
                    next: '.slide3',
                    timeout: 0
                });
            });
        </script>            
    </head>
    <body>
        
        <nav>
            <ul>
                <li><a href="#">Startseite</a></li>
                <li><a href="#">Produkte</a>
                    <ul class="dropdown">
                        <li><a>T-Shirts</a></li>
                        <li><a>Ansteckbuttons</a></li>
                        <li><a>SexToys</a></li>
                    </ul>
                </li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
        
        <section>
            <article>
                <div class="bild slide1">
					<img src="images/tshirt1.png" width="200" height="200" />
					<img src="images/tshirt2.png" width="200" height="200" />
                </div>
                <div class="text">
					<h1>T-Shirts</h1>
                </div>
            </article>
            
            <hr>
            
            <article>
                <div class="bild slide2">
					<img src="images/tshirt3.png" width="200" height="200" />
					<img src="images/tshirt4.png" width="200" height="200" />
                </div>
                <div class="text">
					<h1>T-Shirts</h1>
                </div>
            </article>
            
            <hr>
            
            <article>
                <div class="bild slide3">
					<img src="images/tshirt3.png" width="200" height="200" />
					<img src="images/tshirt4.png" width="200" height="200" />
                </div>
                <div class="text">
					<h1>T-Shirts</h1>
                </div>
            </article>
            
        </section>
    </body>
</html>

Upvotes: 0

Views: 56

Answers (1)

jmore009
jmore009

Reputation: 12923

Using position: absolute removes the element from the flow of the document and by nature becomes relative to the document. You need to contain the submenu in it's parent by using position: relative. Add that to your parent li like so:

nav ul li {
   display: inline-block;
   font-size: 16px;
   position: relative; //add
}

FIDDLE

Upvotes: 1

Related Questions