nicht angemeldet
Hallo zusammen,
ich versuche mich gerade an einem CSS Menü.
Soweit klappt es schon ganz gut.
Was ich jetzt noch gerne machen würde, wäre das sich das Menü ausklappt wenn man mit der Tastatur bzw. mit der Tab Taste ins das Menü springt.
Ich dachte mit einer zusätzlichen Fokus Angabe für das LI Element würde das gehen.
#nav li:focus > ul {
display:block;
}
Dem ist leider nicht so.
Ich poste mal der einfach heit halber mal die gesamte HTML Datei mit CSS.
Vielleicht hat jemand eine Idee dazu?
Kann man das überhaupt mit reinem CSS erreichen?
<!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" />
<title>Unbenanntes Dokument</title>
<style>
#nav,
#nav ul { list-style: none; margin: 0; padding: 0; }
#nav {
background: #16314b;
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
height:1.9em;
}
#nav li.firstlevel > a{
padding-top:0.25em; /* Needed that characters of first line is in middle horizontal line */
}
#nav li {
background: #16314b;
float: left;
height: 1.9em; /* 32px / 14px */
margin: 0;
padding: 0;
position: relative;
}
#nav a {
background: url(../imgage/a.gif) left top no-repeat;
color: #c7d0d9;
display: block;
padding: 1px 7px 3px;
text-decoration: none;
}
#nav input {
background: url(../imgage/a.gif) left top no-repeat;
color: #c7d0d9;
font-size: 100.01%;
display: block;
text-align:left;
text-decoration: none;
border: none;
margin-left:-10px;
*margin-left:-2px;
}
/* Set up the pointers for the sub level indication */
#nav li.fly { background: #20456a url(../image/arrow_right_white.png) no-repeat right center; }
#nav li.drop {background: #16314b url(../image/arrow_down_white.png) no-repeat right center; }
#nav li.fly ul li a{
width:320px;
background: #20456a;
}/*damit beim links aufklappenden Menü Jobsettins die Breite grösser wird */
#nav a:hover,
#nav a:focus { color: #fff }
#nav ul {
background: #20456a;
position: absolute;
}
#nav ul li {
background: none;
float: none;
height: auto;
width: 180px; /* 180 */
}
#nav ul a {
background: none;
width: 165px; /* 163 */
}
#nav ul a:hover, #nav ul a:focus {
background: #16314b;
}
#nav ul .hover>a { background: #16314b; }
#nav ul ul { left: 180px; top: 0.1em; /* 6px / 12px */ }
#nav li ul {display:none;}
#nav li:hover > ul {
display:block;
}
* html #nav li ul {visibility:hidden; display:block; }
#nav li a:hover ul ul{
visibility:hidden;
}
#nav li a:hover ul {
visibility:visible;
}
</style>
</head>
<body>
<ul id="nav">
<li class="firstlevel drop"><a href="#home" style="width:4em" accesskey="8">File</a>
<ul>
<li><a href="job.php?homepage=yes">Home Page</a></li>
<li><a href="job.php?Job=yes">Job</a></li>
<li><a href="#config" onclick="window.open('config.php','ConfigWin','width=800,height=530,scrollbars=yes,resizable=yes')">Config</a></li>
<li><a href="../include/logout.php">Exit</a></li>
</ul>
</li>
<li class="firstlevel drop"><a href="#job" style="width:8.2352941176471em">Settings</a>
<ul>
<li><a href="#savejob" style="width:10.2em"><input name="cmd_savesettingsmenu" type="submit" value="Save settings" onclick="return checkfiles();" /></a></li>
<li class="fly"><a href="#jobsetting" style="width:10.2em">Call settings</a>
<ul>
<li><a href="job.php" style="width:25em">Menu fly 1</a></li>
<li><a href="job.php" style="width:25em">Menu fly 2</a></li>
</ul>
</li>
<li><a href="#delete" style="width:10.2em" onclick="window.open('delete.php','Absolut','width=600,height=450,scrollbars=yes,resizable=yes')">Delete settings</a></li>
</ul>
</li>
</body>
</html>
vielen Dank und viele Grüße
hawk