Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Kerstin77" data-source="post: 2499357" data-attributes="member: 269865">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]&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;&lt;title&gt;&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;* {&nbsp;&nbsp; margin:0;&nbsp;&nbsp; padding:0;}nav {&nbsp;&nbsp; -webkit-box-shadow: 2px 2px 5px #d4e1e7;&nbsp;&nbsp; -moz-box-shadow: 2px 2px 5px #d4e1e7;&nbsp;&nbsp; box-shadow: 2px 2px 5px #d4e1e7;}#mainmenu {&nbsp;&nbsp; list-style:none;&nbsp;&nbsp; background-color:#ffffff;&nbsp;&nbsp; width:960px;&nbsp;&nbsp; margin:0px auto;&nbsp;&nbsp; padding:65px 50px 0 290px;}#mainmenu li {&nbsp;&nbsp; display:inline-block;}#mainmenu li a {&nbsp;&nbsp; margin-right:30px;&nbsp;&nbsp; line-height:30px;&nbsp;&nbsp; text-transform:uppercase;}#mainmenu li ul {&nbsp;&nbsp; margin:0;&nbsp;&nbsp; padding:20px 0px;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp; left:0;&nbsp;&nbsp; width:100%;&nbsp;&nbsp; min-height:220px;&nbsp;&nbsp; text-align:left;&nbsp;&nbsp; display:none;&nbsp;&nbsp; background-color:rgb(255,255,255);&nbsp;&nbsp; background-color:rgba(255,255,255,.5);&nbsp;&nbsp; background-repeat:no-repeat;&nbsp;&nbsp; background-position:right 20px top 20px;&nbsp;&nbsp; -webkit-box-shadow: 2px 2px 5px #d4e1e7;&nbsp;&nbsp; -moz-box-shadow: 2px 2px 5px #d4e1e7;&nbsp;&nbsp; box-shadow: 2px 2px 5px #d4e1e7;}#mainmenu li ul li {&nbsp;&nbsp; display:block;}#mainmenu li ul li a {&nbsp;&nbsp; display:block;&nbsp;&nbsp; text-transform:none;}&lt;/style&gt;&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;&lt;script&gt;$(document).ready(function() {&nbsp;&nbsp; $(&quot;#mainmenu li&quot;).hover(function() {&nbsp; &nbsp;&nbsp; $(this).find(&quot;ul&quot;).stop().fadeToggle(400);&nbsp;&nbsp; });});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &lt;nav&gt;&nbsp; &lt;ul id=&quot;mainmenu&quot;&gt;&nbsp; &lt;li&gt;&nbsp; &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&nbsp; &lt;ul&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 1&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 2&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 3&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 4&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;/ul&gt;&nbsp; &lt;/li&gt;&nbsp; &lt;li&gt;&nbsp; &lt;a href=&quot;#&quot;&gt;Produkte&lt;/a&gt;&nbsp; &lt;ul&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 5&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 6&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 7&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 8&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 9&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 10&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;/ul&gt;&nbsp; &lt;/li&gt;&nbsp; &lt;li&gt;&nbsp; &lt;a href=&quot;#&quot;&gt;Team&lt;/a&gt;&nbsp; &lt;ul&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 11&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;/ul&gt;&nbsp; &lt;/li&gt;&nbsp; &lt;li&gt;&nbsp; &lt;a href=&quot;#&quot;&gt;Kontakt&lt;/a&gt;&nbsp; &lt;ul&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sublink 12&lt;/a&gt;&lt;/li&gt;&nbsp; &lt;/ul&gt;&nbsp; &lt;/li&gt;&nbsp; &lt;/ul&gt;&nbsp; &lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]Hat jemand einen Tip für mich?Kerstin</blockquote>

[QUOTE="Kerstin77, post: 2499357, member: 269865"] 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> [/CODE] Hat jemand einen Tip für mich? Kerstin [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?