Imbericle
Blogger
Im folgenden Code bau ich mir aus Übungszwecken grad n simples CSS Auffaltmenü.
Ich will das zwischen dem Element, aus welchem die Untereinträge herausfahren, und den Ausgefahrenen Elementen ein deutlicherer Abstand in Form des Rahmens.
Drum spreche ich das erste Kind des Aufgeklappten Menüs an und sage ihm das er oben einen Rahmen von 500px haben soll, was der böse Bengel aber nicht tut.
Wie kann ich das anders lösen?
Verzeiht den schrecklichen Code, kann zwar einigermaßen Css bastel aber zum ersten mal ein hovermenü, hatte ich zuvor immer mit Javascript gemacht.
so sieht es aus:
so soll es aussehen:
MfG
Ich will das zwischen dem Element, aus welchem die Untereinträge herausfahren, und den Ausgefahrenen Elementen ein deutlicherer Abstand in Form des Rahmens.
Drum spreche ich das erste Kind des Aufgeklappten Menüs an und sage ihm das er oben einen Rahmen von 500px haben soll, was der böse Bengel aber nicht tut.
Wie kann ich das anders lösen?
Verzeiht den schrecklichen Code, kann zwar einigermaßen Css bastel aber zum ersten mal ein hovermenü, hatte ich zuvor immer mit Javascript gemacht.
Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title></title>
<style type="text/css">
* {padding:0px; margin:0px; }
ul li
{
background-color: #FD2700;
float: left;
margin: 0px 5px;
width: 200px;
text-align: center;
border: solid black;
font-weight:bold;
color:yellow;
}
[COLOR=red][SIZE=5]ul li:hover ul:first-child[/SIZE][/COLOR]
{
border-top-width:500px;
}
ul
{
list-style-type: none;
}
ul li ul
{
display: none;
}
ul li:hover ul
{
display: block;
padding:0px;
margin:0px;
}
ul li:hover ul li
{
margin:0px;
border-width: 1px 0;
}
li:hover
{
background-color: #FB4607;
color:#07F3FA;
}
body
{
background-color:#00FF4F
}
ul li:hover ul li a:link
{
text-decoration: none;
color: #FAFB07;
}
</style>
<meta name="author" content="Imbericle" />
<meta name="editor" content="Eigenbau, ja?!"/>
<meta name="keywords" content="schlechte, Seite"/>
<meta name="description" content="meine erste Seite und ja sie ist schlecht!"/>
</head>
<body>
<ul>
<li>
Hallo
<ul>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
</ul>
</li>
<li>
Hallo
<ul>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
</ul>
</li>
<li>
Hallo
<ul>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
<li><a href="#">Blaa</a></li>
</ul>
</li>
</ul>
</body>
</html>so sieht es aus:
so soll es aussehen:
MfG
Zuletzt bearbeitet: