Antworten auf deine Fragen:
Neues Thema erstellen

Dropdown-Menu: Submenu immer links anzeigen

K

Kerstin77

Flashfan

Hallo,

versuche gerade mir ein kleines Dropdown-Menu zu basteln, in dem das Submeu allerdings immer Links unterhalb des ersten Menüpunktes angezeigt werden soll. Aktuell steht das Submenu ganz links auf der Seite.

Copy/Paste Beispiel:

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>

<style type="text/css">
* {
   margin:0;
   padding:0;
}
nav {
   -webkit-box-shadow: 2px 2px 5px #d4e1e7;
   -moz-box-shadow: 2px 2px 5px #d4e1e7;
   box-shadow: 2px 2px 5px #d4e1e7;
}
#mainmenu {
   list-style:none;
   background-color:#ffffff;
   width:960px;
   margin:0px auto;
   padding:65px 50px 0 290px;
}
#mainmenu li {
   display:inline-block;
}
#mainmenu li a {
   margin-right:30px;
   line-height:30px;
   text-transform:uppercase;
}
#mainmenu li ul {
   margin:0;
   padding:20px 0px;
   position: absolute;
   left:0;
   width:100%;
   min-height:220px;
   text-align:left;
   display:none;
   background-color:rgb(255,255,255);
   background-color:rgba(255,255,255,.5);
   background-repeat:no-repeat;
   background-position:right 20px top 20px;
   -webkit-box-shadow: 2px 2px 5px #d4e1e7;
   -moz-box-shadow: 2px 2px 5px #d4e1e7;
   box-shadow: 2px 2px 5px #d4e1e7;
}
#mainmenu li ul li {
   display:block;
}
#mainmenu li ul li a {
   display:block;
   text-transform:none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#mainmenu li").hover(function() {
     $(this).find("ul").stop().fadeToggle(400);
   });
});
</script>

</head>
<body>

  <nav>
  <ul id="mainmenu">
  <li>
  <a href="#">Home</a>
  <ul>
  <li><a href="#">Sublink 1</a></li>
  <li><a href="#">Sublink 2</a></li>
  <li><a href="#">Sublink 3</a></li>
  <li><a href="#">Sublink 4</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Produkte</a>
  <ul>
  <li><a href="#">Sublink 5</a></li>
  <li><a href="#">Sublink 6</a></li>
  <li><a href="#">Sublink 7</a></li>
  <li><a href="#">Sublink 8</a></li>
  <li><a href="#">Sublink 9</a></li>
  <li><a href="#">Sublink 10</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Team</a>
  <ul>
  <li><a href="#">Sublink 11</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Kontakt</a>
  <ul>
  <li><a href="#">Sublink 12</a></li>
  </ul>
  </li>
  </ul>
  </nav>

</body>
</html>

Hat jemand einen Tip für mich?

Kerstin
 

K

Kerstin77

Flashfan

Online stellen zur Zeit leider nicht. Dafür war das Copy/Paste Beispiel gedacht...

So soll es aussehen, ist nur leider kein gültiges HTML:

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>

<style type="text/css">
* {
   margin:0;
   padding:0;
}
nav {
   -webkit-box-shadow: 2px 2px 5px #d4e1e7;
   -moz-box-shadow: 2px 2px 5px #d4e1e7;
   box-shadow: 2px 2px 5px #d4e1e7;
}
#mainmenu {
   list-style:none;
   background-color:#ffffff;
   width:960px;
   margin:0px auto;
   padding:65px 50px 0 290px;
}
#mainmenu li {
   display:inline-block;
}
#mainmenu li a {
   margin-right:30px;
   line-height:30px;
   text-transform:uppercase;
}
#mainmenu li ul {
   margin:0;
   padding:20px 0px;
   position: absolute;
   left:0;
   width:100%;
   min-height:220px;
   text-align:left;
   display:none;
   background-color:rgb(255,255,255);
   background-color:rgba(255,255,255,.5);
   background-repeat:no-repeat;
   background-position:right 20px top 20px;
   -webkit-box-shadow: 2px 2px 5px #d4e1e7;
   -moz-box-shadow: 2px 2px 5px #d4e1e7;
   box-shadow: 2px 2px 5px #d4e1e7;
}
#mainmenu li ul li {
   display:block;
}
#mainmenu li ul li a {
   display:block;
   margin-right:0;
   text-transform:none;
}
.sublinks {
   width:960px;
   margin:0px auto;
   padding-left:240px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#mainmenu li").hover(function() {
     $(this).find("ul").stop().fadeToggle(400);
   });
});
</script>

</head>
<body>

  <nav>
  <ul id="mainmenu">
  <li>
  <a href="#">Home</a>
  <ul>
     <div class="sublinks">
  <li><a href="#">Sublink 1</a></li>
  <li><a href="#">Sublink 2</a></li>
  <li><a href="#">Sublink 3</a></li>
  <li><a href="#">Sublink 4</a></li>
  </div>
  </ul>
  </li>
  <li>
  <a href="#">Produkte</a>
  <ul>
     <div class="sublinks">
  <li><a href="#">Sublink 5</a></li>
  <li><a href="#">Sublink 6</a></li>
  <li><a href="#">Sublink 7</a></li>
  <li><a href="#">Sublink 8</a></li>
  <li><a href="#">Sublink 9</a></li>
  <li><a href="#">Sublink 10</a></li>
     </div>
  </ul>
  </li>
  <li>
  <a href="#">Team</a>
  <ul>
  <div class="sublinks">
     <li><a href="#">Sublink 11</a></li>
  </div>
  </ul>
  </li>
  <li>
  <a href="#">Kontakt</a>
  <ul>
  <div class="sublinks">
     <li><a href="#">Sublink 12</a></li>
  </div>
  </ul>
  </li>
  </ul>
  </nav>

</body>
</html>
 
E

Enigmon

Nicht mehr ganz neu hier

Auf die Gefahr mich hier zum Klops zu machen, warum ist das HTML ungültig?
Hab ich was übersehen?

LG
Thomas
 
Zuletzt bearbeitet:
K

Kerstin77

Flashfan

Ich hab's :)
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>

<style type="text/css">
* {
   margin:0;
   padding:0;
}
nav {
   -webkit-box-shadow: 2px 2px 5px #d4e1e7;
   -moz-box-shadow: 2px 2px 5px #d4e1e7;
   box-shadow: 2px 2px 5px #d4e1e7;
}
#mainmenu {
   list-style:none;
   background-color:#ffffff;
   width:960px;
   margin:0px auto;
   padding:65px 50px 0 290px;
}
#mainmenu li {
   display:inline-block;
}
#mainmenu li a {
   margin-right:30px;
   line-height:30px;
   text-transform:uppercase;
}
.submenu {
   position: absolute;
   left: 0;
   width: 100%;
   display:none;
   background-color:rgb(255,255,255);
   background-color:rgba(255,255,255,.5);
   background-repeat:no-repeat;
   background-position:right 20px top 20px;
   -webkit-box-shadow: 2px 2px 5px #d4e1e7;
   -moz-box-shadow: 2px 2px 5px #d4e1e7;
   box-shadow: 2px 2px 5px #d4e1e7;
}
#mainmenu li ul {
   width: 960px;
   margin:0px auto;
}
#mainmenu li ul li {
   display:block;
}
#mainmenu li ul li a {
   display:block;
   margin-right:0;
   text-transform:none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#mainmenu li").hover(function() {
     $(this).find(".submenu").stop().fadeToggle(400);
   });
});
</script>

</head>
<body>

  <nav>
  <ul id="mainmenu">
  <li>
     <a href="#">Home</a>
  <div class="submenu">
  <ul>
  <li><a href="#">Sublink 1</a></li>
  <li><a href="#">Sublink 2</a></li>
  <li><a href="#">Sublink 3</a></li>
  <li><a href="#">Sublink 4</a></li>
  </ul>
  </div>
  </li>
  <li>
  <a href="#">Produkte</a>
  <div class="submenu">
  <ul>
  <li><a href="#">Sublink 5</a></li>
  <li><a href="#">Sublink 6</a></li>
  <li><a href="#">Sublink 7</a></li>
  <li><a href="#">Sublink 8</a></li>
  <li><a href="#">Sublink 9</a></li>
  <li><a href="#">Sublink 10</a></li>
  </ul>
  </div>
  </li>
  <li>
  <a href="#">Team</a>
  <div class="submenu">
  <ul>
  <li><a href="#">Sublink 11</a></li>
  </ul>
  </div>
  </li>
  <li>
  <a href="#">Kontakt</a>
  <div class="submenu">
  <ul>
  <li><a href="#">Sublink 12</a></li>
  </ul>
  </div>
  </li>
  </ul>
  </nav>

</body>
</html>
 
patrick_l

patrick_l

Hat es drauf

Eine Division hat in einer Liste (Innerhalb des UL und OL-Tags) nicht zu suchen! Nun zu deiner Frage:

HTML: 
<nav id="mainmenu" role="navigation">

    <ul>
        <li class="dropdown">
            <a href="#">Example 1</a>
            <ul class="dropdown-menu example-1">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Example 2</a>
            <ul class="dropdown-menu example-2">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
    </ul>
</nav>
Über CSS die UL in der zweiten Ebene auf display:block setzen und absolute positionieren. Mit positiven oder negativen Margin an die gewünschte Stelle verschieben.
Edit:
Kerstin77 schrieb:
Ich hab's :)
Zum Vergrößern anklicken....
Warst wohl schneller ;)

Liebe Grüße, Patrick
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 48 (Mitglieder: 1, Gäste: 47)
Robots: 843

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben