Wie, um code eines Dropdown-Menüs in css?

Habe ich codiert eine horizontale navigation, wie unten gezeigt.

Wie, um code eines Dropdown-Menüs in css?

Aber ich habe eine harte Zeit versucht, um code, der eine drop-down-Menü.

Wenn mir jemand helfen kann mit dem codieren ein schlichter drop-down-Menü unten Mieten (markieren Sie in der Navigationsleiste in sea blue), ich kann mich verbessern.

Dank

Hier ist meine aktuelle html-Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"             
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="css/layout.css" rel="stylesheet" type="text/css" />
  <title>Untitled Document</title>
</head>

<body>
<ul class="glossymenu">
    <li class="separator"><a href="#"><b>Reservations</b></a></li>
                       /* Added for the drop down */
                   <ul class="child">
                           <li><a href="#"><b>New Reservation</b></a></li>
                           <li><a href="#"><b>Search Reservation</b></a></li>
                           <li><a href="#"><b>Search Customer</b></a></li>
                           <li><a href="#"><b>Search Vehicle</b></a></li>
                       </ul>
            <li class="separator"><a href="#"><b>Rentals</b></a></li>
    <li class="separator"><a href="#"><b>Tariffs</b></a></li>   

            <li class="separator"><a href="#"><b>Fleet</b></a></li> 
    <li class="separator"><a href="#"><b>Tools</b></a></li> 
    <li class="separator"><a href="#"><b>Reports</b></a></li>
            <li class="separator"><a href="#"><b>System Management</b></a></li>        
    </ul>

</body>

Hier ist mein css code:

.glossymenu{

    padding: 0 0 0 0px;
    margin: 0 auto 0 auto;
    background: url(../images/menur_bg.gif) repeat-x; 
    height: 36px;
    list-style: none;
    border:solid 1px #CCC;
}

.glossymenu li{

    float:left;
}

.glossymenu li a{

    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold; 
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;

}

.glossymenu li a b{

    float: left;
    display:block;
    padding: 0 28px 0 8px; 
}

.glossymenu li a:hover{

    color: #fff;
    background: url(../images/menur_hover_left.gif) no-repeat; 
    background-position: left bottom;;
}

.glossymenu li a:hover b{

    color: #fff; 
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.glossymenu li.separator {

    background:url(../images/separator.gif) no-repeat;
    background-position:right;
    padding: 0 5px 0 3.5px;
}

   /* Added for the drop down */  
.glossymenu .child {

    position:absolute;
    visibility:hidden;
    top:100px;
}

.glossymenu ul li:hover  {

    visibility:visible;
    z-index:9999; 
}
Eigentlich wollte ich das Horizontale drop-down-Menüs. Konnte es nicht funktionieren.
Wenn wir beiseite lassen, drop-down-Menüs wird schrecklich UI-Steuerelemente für Webseiten, CSS dann ist eine schreckliche Programm für die Erstellung der Interaktivität Teile von Ihnen. Sie können nicht nur die in zeitlichen Verzögerungen kommen, erlauben fuzzy-tracking -, Tastatur-Zugriff ist ein no-no, und so weiter. Wenn Sie drop-down-Menüs, dann die JavaScript verwenden. Ehrlich gesagt, ich würde zahlen für UDM, wenn ich wirklich gebraucht.
Bitte sagen Sie uns den Fehler oder die genaue problem mit dem, was Sie bisher ausprobiert haben. stackoverflow ist eine Webseite für das helfen Sie herausfinden, die Lösung für ein problem, nicht für das schreiben von code für Sie.
okay fertig. Ich sagte sogar die Teile, die ich bearbeitet habe. sorry

InformationsquelleAutor Haxed | 2011-02-01

Schreibe einen Kommentar