• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schöne "Aktionsleiste"

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../style/tessststyle.css" /> 
</head>
<body>
<ul class="Menue">
  <li><a href="">Menü1</a> 
        <ul >
       <li> <a id="untermenue" href="#" >untermenue1</a> </li>
       <li> <a href="#" >untermenue2</a> </li>
        <li><a href="#" >untermenue3</a> </li>
            </ul>
</li></ul>
</body>
</html>
Code: 
}
ul a:hover {
Background-color:#ffffff 
Background-width: 20px 
Background-height: 20px;
visibility:visible; 
}
# unsichtbar {
Background-color: red;
visibility:hidden ; 
}
#Untermenue  li ul { 
display:none; 
visibility:hidden ; 
}
#Untermenue  li:hover ul { 
display:block; 
visibility:visible;
}
#menue { 
display:none; 
visibility:hidden ; 
}

Geht immernoch nicht langsam verliere ich den Überblick !

Gruß Niklas
 
Werbung:
Mach es doch einfacher... :grin:

z.b.

HTML:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../style/tessststyle.css" />
</head>
<body>

  <ul id="menue">
    <li><a href="">Menü1</a>
           <ul >
              <li><a href="#" >untermenue1</a> </li>
              <li><a href="#" >untermenue2</a> </li>
              <li><a href="#" >untermenue3</a> </li>
          </ul>
    </li>
  </ul>

</body>
</html>
CSS:
Code: 
ul#menue li a:hover {
background-color:#ffffff;
background-width: 20px;
background-height: 20px;
}

ul#menue li ul { 
display:none;     /*blendet die 2. Liste aus*/
margin:0;          /*abstände der zweiten liste auf 0 gesetzt*/
padding:0;        /*abstände der zweiten liste auf 0 gesetzt*/

}


ul#menue li:hover ul { 
display:block;       /*zeigt sie bei hover wieder an*/
margin:0;            /*abstände der zweiten liste auf 0 gesetzt*/
padding:0;          /*abstände der zweiten liste auf 0 gesetzt*/
}
Liebe Grüße :grin:
sunoghlin
 
Werbung:
Natürlich nicht.

Du sagst ja auch über deine css:

Code: 
#menue { 
display:none; 
visibility:hidden ; 
}
Mit display:none; sagst du, das die id menue nicht angezeigt wird.

Außerdem hast du noch mehr fehler im css:

Ich war mal so frei (nur fehler entfernt): :grin:

Code: 
body {
background-color:#ffff00;
background-repeat: no-repeat;
color: #ff0000;
padding:0;
margin:0;
text-align: center;
}
p {
margin:0 auto;
text-align: center;
color: #ff0000;
padding: 0px;
font-size: 20px;
border: none; 
}
label {
color: #ff0000;
}
#bildwrapper {
width: 930px;
margin:auto;
border-width: 4px 8px 4px 8px;
border-style: solid;
border-color: #ff0000;
}
#bild1 {
border-width: 4px 0 8px 0;
border-style: solid;
border-color: #ff0000;
display:block;
}
#bild2 {
border-width: 0 4px 8px 0;
border-style: solid;
border-color: #ff0000;
}
#bild3 {
border-width: 0 4px 8px 4px;
border-style: solid;
border-color: #ff0000;
}
#bild4 {
border-width: 0 0 8px 4px;
border-style: solid;
border-color: #ff0000;
}
#schrift {
border-width: 0 4px 4px 0;
border-style: solid;
border-color: #ff0000;
padding: 30px;
}
h1 {
color:  #ff0000;
}
#menu {
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
} 
#menu ul {
float: left;
width: 150px;
list-style-type: none;
} 
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

ul a:hover {
background-color:#ffffff;
}


ul#menue li a:hover {
background-color:#ffffff;

}
ul#menue li ul { 
display:none;     
margin:0;          
padding:0;       
}
ul#menue li:hover ul { 
display:block;       
margin:0;           
padding:0;          
}
Liebe Grüße :grin:
sunoghlin
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben