Sorry, hier mit Tags:
Und hier nochmals die Frage:
Hallo, könntet Ihr mir noch einen Tipp bezüglich der Sub-Menüs geben? Diese sollen nur den grünen Strich über dem Menü-Text erhalten, wenn man mit der Maus drüber fährt. Ich krieg das einfach nicht hin, danke im Voraus.
Viele Grüße J.
Hier das HTM und CSS:
Code:
/*** ESSENTIAL STYLES ***/
/*richtet es auf Null aus */
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
/**/
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em; /* vergrößert Abstand zw. Navi und breadcrumb*/
}
.sf-menu a {
/* border-left: 1px solid green; /* IEM hier muss der linke Rand definiert werden!*/
/* IEM 02.09.2010 IEM geändert border-top: 1px solid #CFDEFF; */
padding: 5px 5px 0 5px; /* IEM .75em 1em; */
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#3A7307; /*IEM #13a */
}
/*
.sf-menu a span, .sf-menu a:visited span { /* IEm n.B. visited pseudo selector so IE6 applies text colour
border-top: solid 2px pink; /*IEM n.B. funktoiniert nicht! malt alles an!!! */
.sf-menu li {
background: #FFF; /* IEM #BDD2FF; */
}
.sf-menu li li {
background:#FFF; /* IEM #AABDE6; */
}
.sf-menu li li li {
background:#FFF; /* #9AAEDB; */
}
.sf-menu li:hover a span, .sf-menu li.sfHover span,
.sf-menu a:focus span, .sf-menu a:hover span, .sf-menu a:active span {
border-top: solid 2px #3A7307; /*IEM n.B.*/
}
.sf-menu ul:first-child {
margin-left: 0;
padding-left: 0;
}
.sf-menu li:first-child, .sf-menu li.first-child {
margin-left: 0;
padding-left: 0;
}
/* .sf-menu li:last-child, .sf-menu li.last-child {
}
20100901 IEM: CSS-Fehler: Unbekanntes Pseudoelement oder Pseudoklasse: :last-child
*/
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
/* background: #CFDEFF; */
outline: 0;
}
.sf-menu li .separator {
display: block;
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
text-decoration:none; /*IEM n.B.*/
}
/* IEM Raus damit
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
/* IEM 02.09.2010 background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; */ /* 8-bit indexed alpha png. IE6 gets solid image only
}
a > .sf-sub-indicator { /* give all except IE6 the correct values
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers
}
/* apply hovers to modern browsers
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers
}
*/
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
/* -moz-border-radius-bottomleft: 17px; IEM 20100901 css Fehler :Die Eigenschaft -moz-border-radius-bottomleft existiert nicht : 17px 17px
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px; */
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
.sf-menu .active {
background: #ccc;
}
.sf-menu #current2 {
background: #fff; /* IEM #aaa*/
}
.sf-menu #current2 span {
border-top: solid 2px #3A7307; /*IEM n.B. markiert den geklickten Menüpunkt*/
}
.superfish_clear {
clear: both !important;
height: 1px !important;
overflow: hidden !important;
font-size: 1px !important;
margin: 0 !important;
padding: 0 !important;
}
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML lang="de-de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="index, follow">
<meta name="keywords" content="joomla, Joomla">
<meta name="title" content="Seite merken">
<meta name="author" content="Administrator">
<meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System">
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management">
<title>
Seite merken
</title>
<link href="/joomla15/templates/nun/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="http://localhost/joomla15/plugins/content/sexybookmarks/style.css?ver=1.1.0" type="text/css">
<link rel="stylesheet" href="http://localhost/joomla15/components/com_tag/css/tagcloud.css" type="text/css">
<link rel="stylesheet" href="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/css/superfish.css" type="text/css">
<script type="text/javascript" src="/joomla15/media/system/js/mootools.js">
</script>
<script type="text/javascript" src="/joomla15/media/system/js/caption.js">
</script>
<script type="text/javascript" src="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/js/jquery.js">
</script>
<script type="text/javascript" src="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/js/jquery.event.hover.js">
</script>
<script type="text/javascript" src="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/js/superfish.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover', pathClass:'active', pathLevels:0, delay:800, animation:{opacity:'show'}, speed:'def', autoArrows:1, dropShadows:1}) });
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
</script>
<link rel="stylesheet" href="/joomla15/templates/nun/css/template.css" type="text/css">
<link rel="stylesheet" href="/joomla15/templates/nun/css/position.css" type="text/css" media="screen,projection">
<link rel="stylesheet" href="/joomla15/templates/nun/css/layout.css" type="text/css" media="screen,projection">
<link rel="stylesheet" href="/joomla15/templates/nun/css/print.css" type="text/css" media="Print">
<link rel="stylesheet" href="/joomla15/templates/nun/css/general.css" type="text/css">
<!--[if lte IE 6] >
< link href="/joomla15/templates/nun/css/ieonly.css" rel="stylesheet" type="text/css" / >
< ![endif]-->
<!--[if IE 7] >
< link href="/joomla15/templates/nun/css/ie7only.css" rel="stylesheet" type="text/css" / >
< ![endif]-->
<script type="text/javascript" src="/joomla15/templates/nun/javascript/md_stylechanger.js">
</script>
<link type="text/css" rel="stylesheet" id="webdeveloper-outline-current-element" href="chrome://webdeveloper/content/stylesheets/outline_current_element.css">
</head>
<body style="font-size: 100%; outline: 1px solid rgb(255, 0, 0);">
<div id="all">
<div id="header">
<h1 id="logo">
<img src="/joomla15/templates/nun/images/nun.png" alt="Logo " border="0" width="473" height="23">
</h1>
<ul>
<li>
<a href="#content" class="u2">
Skip to Content
</a>
</li>
<li>
<a href="#mainmenu" class="u2">
Jump to Main Navigation and Login
</a>
</li>
<li>
<a href="#additional" class="u2">
Jump to additional Information
</a>
</li>
</ul>
<h2 class="unseen">
Search, View and Navigation
</h2>
<div id="superfishmenu">
<ul class="menu sf-menu sf-horizontal sf-js-enabled sf-shadow">
<li class="first-child item63">
<a href="http://localhost/joomla15/">
<span>
Philosophie
</span>
</a>
</li>
<li class="item62">
<a href="/joomla15/index.php?option=com_content&view=category& ;layout=blog&id=39&Itemid=62">
<span>
Leistungsumfang
</span>
</a>
</li>
<li class="parent item67">
<a class="sf-with-ul" href="/joomla15/index.php?option=com_content&view=article& id=62&Itemid=67">
<span>
Referenzen
</span>
<span class="sf-sub-indicator">
»
</span>
</a>
<ul style="display: none; visibility: hidden;">
<li class="parent item68">
<a class="sf-with-ul" href="/joomla15/index.php?option=com_content&view=article& id=45&Itemid=68">
<span>
Branchen
</span>
<span class="sf-sub-indicator">
»
</span>
</a>
<ul style="display: none; visibility: hidden;">
<li class="first-child item72">
<a href="/joomla15/index.php?option=com_content&view=article& id=1&Itemid=72">
<span>
Joomla Standard
</span>
</a>
</li>
<li class="item77">
<a href="/joomla15/index.php?option=com_content&view=article& id=67&Itemid=77">
<span>
Seite merken
</span>
</a>
</li>
<li class="last-child item78">
<a href="/joomla15/index.php?option=com_content&view=article& id=65&Itemid=78">
<span>
Subpunkt
</span>
</a>
</li>
</ul>
</li>
<li class="last-child item73">
<a href="/joomla15/index.php?option=com_content&view=article& id=44&Itemid=73">
<span>
Beitrag A
</span>
</a>
</li>
</ul>
</li>
<li class="item69">
<a href="/joomla15/index.php?option=com_content&view=article& id=61&Itemid=69">
<span>
Pressemitteilungen
</span>
</a>
</li>
<li class="item70">
<a href="/joomla15/index.php?option=com_content&view=article& id=63&Itemid=70">
<span>
Netzwerk
</span>
</a>
</li>
<li class="last-child item74">
<a href="/joomla15/index.php?option=com_contact&view=contact& id=1&Itemid=74">
<span>
Kontakt
</span>
</a>
</li>
</ul>
<form action="index.php" method="post" class="search">
<label for="mod_search_searchword">
Suchen
</label>
<input name="searchword" id="mod_search_searchword" maxlength="20" class="inputbox" size="100" value="Suchen..." onblur="if(this.value=='') this.value='Suchen...';" onfocus="if(this.value=='Suchen...') this.value='';" type="text">
<input value="Suchen" class="button" src="/joomla15/images/M_images/searchButton.gif" type="image">
<input name="option" value="com_search" type="hidden">
<input name="task" value="search" type="hidden">
<input name="Itemid" value="76" type="hidden">
</form>
</div>
<div class="wrap">
</div>
</div>
<!-- end header -->
</body>
</html>
|