Liebe Community,
Ich bin neu hier und auch recht unerfahren was html und css angeht.
Ich habe etwas rumprobiert und aus dem Internet von Tutorials ein paar Codes gefunden. letztlich habe ich es dann geschafft ein funktionierendes Dropdown-Menü auf meinem Blog einzubauen, doch es gibt da einen kleinen Schönheitsfehler, den ich irgendwie nicht beheben kann:
Der Blog: https://jus-jo.blogspot.de/
Das Problem:
Und zwar erscheint unter den Kategorien, die ich als Dropdown erstellt habe, eine Subkategorie in einem Kästchen. Das ist links an den Ecken abgerundet, aber rechts einfach abgesäbelt und das stört mich.
Vielleicht kann sich das mal jemand angucken, ich kopiere hier unten mal die html und css Codes rein:
HTML:
CSS:
Danke schonmal im Vorraus.
LG
Throkir
Ich bin neu hier und auch recht unerfahren was html und css angeht.
Ich habe etwas rumprobiert und aus dem Internet von Tutorials ein paar Codes gefunden. letztlich habe ich es dann geschafft ein funktionierendes Dropdown-Menü auf meinem Blog einzubauen, doch es gibt da einen kleinen Schönheitsfehler, den ich irgendwie nicht beheben kann:
Der Blog: https://jus-jo.blogspot.de/
Das Problem:
Und zwar erscheint unter den Kategorien, die ich als Dropdown erstellt habe, eine Subkategorie in einem Kästchen. Das ist links an den Ecken abgerundet, aber rechts einfach abgesäbelt und das stört mich.
Vielleicht kann sich das mal jemand angucken, ich kopiere hier unten mal die html und css Codes rein:
HTML:
HTML:
<!--Start Navigation -->
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href='[URL]http://jus-jo.blogspot.de/[/URL]'>Home</a></li>
<li><a href='[URL]https://jus-jo.blogspot.de/p/arbeit.html[/URL]'>Arbeit</a>
<ul>
<li><a href='[URL]https://jus-jo.blogspot.de/p/ria-die-lichtklan-chroniken.html[/URL]'>Ria - Die Lichtklan Chroniken (Comicreihe)</a></li>
</ul>
</li>
<li><a href='[URL]https://jus-jo.blogspot.de/p/fan.html[/URL]'>Fanfictions</a>
<ul>
<li><a href='[URL]https://jus-jo.blogspot.de/p/blog-page_6.html[/URL]'>Die Geschichten von Tolliks, dem Uralten</a></li>
</ul>
</li>
<li><a href='[URL]https://jus-jo.blogspot.de/p/kurzgeschichten.html[/URL]'>Kurzgeschichten</a>
</li>
<li><a href='[URL]https://jus-jo.blogspot.de/p/blog-page_21.html[/URL]'>Über Mich</a>
</li>
<li><a href='[URL]https://jus-jo.blogspot.de/p/copyright.html[/URL]'>Impressum</a>
</li>
</ul>
</div>
<!--End Navigation -->CSS:
CSS:
/* ----- CSS Nav Menu Styling ----- */
#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 35px; /* change the height of the navigation bar */
}
#navigationcss {
margin: 0 auto;
padding: 0;
}
#navigationcss ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #664a16; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px; /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}
#navigationcss li a:hover, #navigationcss li a:active {
color: #000000 ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff; /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #d4d4d4 ; /* change the background color of drop down items on hover */
color: #664a16; /* change the color of drop down links on hover */
padding: 7px 10px; /* keep these the same as the above section */
}
#navigationcss li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#navigationcss li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
left: auto;
}Danke schonmal im Vorraus.
LG
Throkir
Zuletzt bearbeitet von einem Moderator:
