css menu auf andere ebene

spoo

Hallo bin neu hier, erfahren in html, css aber kein profie, deswegen kommt gleich mal eine frage von mir, ich hab schon ewig gesucht nach meinem problem. ... wenn ich das menu so aufgebaut habe und zb bei "other bookmarks" ein längeres menu hätte und mit der maus runterfahre überschneidet sich die 2 "menu" von unten, probiert mal bitte selber aus!! hat jemand eine lösung wie ich das lösen kann?
/test

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
        font: normal 1em Helvetica, Arial, sans-serif;
        background-color:#000000;
        background:url(bgrep.png) repeat-x;
}
nav { width: 500px;
      height: 100px;
      padding: 0px;
      border: 0px solid black;
      margin:0px auto;






      }




h1 {
  color:black;   /* Farbe orange */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
  text-align:center;
}




nav ul {
        margin: 0;
        padding: 0;
        text-align: center;
        background-color:;
}


nav li {
        list-style: none;
        float: left;
        width: 80px;
        position: relative;
        margin: 0.5em;


        padding: 0;
        background-color:;
}


nav ul ul {
        margin: 0.4em 0 0;
        padding: 0;
        position: absolute;
        top: 1.7em;
        left: -0.4em;
        margin: 0;


        padding: 0;
        position: absolute;
        top: 1.7em;
        font: 0/0 serif;/* Unternavigation ausblenden */
        z-index: -1;
}


nav ul ul li {


        float: none;
        display: block;
        margin-bottom: 0.0em;
        margin-top: 0;
}


 nav a,
nav span {


         font-size: 13px;
        display: block;
        width: 80px;
        margin: 1px;
        padding: 0.3em;
        text-decoration: none;
        font-weight: bold;
        border: 1px solid green;
        border-radius: 10px 5px 10px 5px;


        color: green;
        background-color: black;
        -webkit-transition: all .25s ease-in;
        transition: all .25s ease-in;
}


  nav a {
    color: green;


    background-color: #000;
    transition: background-color .25s ease-in;
  }


  nav a:focus, nav a:hover, nav span {
    color: black;
    background-color: green;
    transition: background-color 0.01s;
  }




nav ul li:hover ul {
  font: inherit;
  z-index: auto;   /*  Unternavigation einblenden */
}


</style>
<title></title>


</head>
<body style="background-color:#000;">
 <h1>Bookmarks</h1>
<div id="center" style=" width:100%;margin:1% 0% 0% 0%;text-align:center;border: 0px solid green; ">
    <form>
                                <input style="width:200px; type="text" placeholder="Search..." required>
                                <input type="button" value="Search">
</form>
<div style=" width:600px;margin:0px auto;text-align:center;border: 0px solid green;background:url(raster.png) repeat; ">
 <nav >
        <ul>
                <li><a href="#Beispiel">Downloads</a>
                </li>
                <li><a href="#Beispiel">Other Bookmarks</a>
                        <ul>
                                <li><a href="#Beispiel">Seite 2a</a>
                                </li>
                                <li><a href="#Beispiel">Seite 2b</a>
                                </li>
                                   <li><a href="#Beispiel">Seite 2a</a>
                                </li>
                                <li><a href="#Beispiel">Seite 2b</a>
                                </li>   <li><a href="#Beispiel">Seite 2a</a>
                                </li>
                                <li><a href="#Beispiel">Seite 2b</a>
                                </li>   <li><a href="#Beispiel">Seite 2a</a>
                                </li>
                                <li><a href="#Beispiel">Seite 2b</a>
                                </li>
                        </ul>
                </li>
                <li><a href="#Beispiel">APPS Portable FreeStuff usw</a>
                </li>
                <li><a href="#Beispiel">Web</a>
                        <ul>
                                <li><a href="#Beispiel">Ect.</a>
                                </li>
                                <li><a href="#Beispiel">Seite 4c</a>
                                </li>
                        </ul>
                </li>
                <li><a href="#Beispiel">Seite 5</a>
                </li>
        </ul>
</nav>
 <nav>
        <ul>
                <li><a href="#Beispiel">Seite 1</a>
                </li>
                <li><a href="#Beispiel">Seite 2</a>
                        <ul>
                                <li><a href="#Beispiel">Seite 2a</a>
                                </li>
                                <li><a href="#Beispiel">Seite 2b</a>
                                </li>
                        </ul>
                </li>
                <li><a href="#Beispiel">Seite 3</a>
                </li>
                <li><a href="#Beispiel">Seite 4</a>
                        <ul>
                                <li><a href="#Beispiel">Seite 4a</a>
                                </li>
                                <li><a href="#Beispiel">Seite 4c</a>
                                </li>
                        </ul>
                </li>
                <li><a href="#Beispiel">Seite 5</a>
                </li>
        </ul>
</nav>
</div>
 <small style="color:#fff;">Admin/c</small>
</div>
</body>
</html>

Alles anzeigen

danke
mfg
dan

djheke

Probier mal

Code

body {
        font: normal 1em Helvetica, Arial, sans-serif;
        background-color:#000000;
        background:url(bgrep.png) repeat-x;
}
nav { width: 500px;
      height: 100px;
      padding: 0px;
      border: 0px solid black;
      margin:0px auto;
}




h1 {
  color:orange;   /* Farbe orange */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
  text-align:center;
}




nav ul {
        margin: 0;
        padding: 0;
        text-align: center;
}


nav li {
        list-style: none;
        float: left;
        width: 80px;
        position: relative;
        margin: 0.5em;
        padding: 0;
}


nav ul ul {
         position: absolute;
         top: -99999em;
}


nav ul ul li {
        float: none;
        display: block;
}


 nav a,
nav span {
        font-size: 13px;
        display: block;
        padding: 0.3em;
        text-decoration: none;
        font-weight: bold;
        border: 1px solid green;
        border-radius: 10px 5px 10px 5px;
        color: green;
        background-color: black;
        -webkit-transition: all .25s ease-in;
        transition: all .25s ease-in;
}


  nav a {
      transition: background-color .25s ease-in;
  }


  nav a:focus, nav a:hover, nav span {
    color: black;
    background-color: green;
    transition: background-color 0.01s;
  }




nav ul li:hover ul {
  font: inherit;
  top:auto;
  z-index:99;
}

Alles anzeigen

spoo

Hallo, danke ein wahrer Meister

djheke

Nun, übertreibe mal nicht.

css menu auf andere ebene

Tags

Benutzer online in diesem Thema