Wie, um code eines Dropdown-Menüs in css?
Habe ich codiert eine horizontale navigation, wie unten gezeigt.
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
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 Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wollen Sie etwas, das wie
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
Hinzugefügt:
Einige css-basierte Menüs
http://purecssmenu.com/ -- guess-Sie können die Generierung der css -
http://cssmenumaker.com/drop_down_css_menu.php
http://sperling.com/examples/menuh/
InformationsquelleAutor Clyde Lobo
in deinem Beispiel kann ich nicht sehen, wo Sie auf bewegen Sie den Second-Level "display:block".
Hier ist ein einfaches Beispiel für CSS-Dropdown-Menü.
HTML:
CSS:
InformationsquelleAutor Chugworth