|
|||
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> |
Sponsored Links |
|
|||
Zum anschauen
Hallo,
ich habe das jetzt mal online zur Verfügung gestellt: rezeptkocher.de Dort könnt Ihr das Menü finden, der grüne Strich sollte auch nach Klick auf den Menüpunkt noch vorhanden sein, leider geht das jetzt auch nicht mehr. Die grünen Striche im Sub-Menü sollten nur erscheinen, wenn auch drauf geklickt wird. Wäre echt froh wenn Ihr mir nochmals helfen könntet Danke im Voraus Jeanny |
|
||||
Zitat:
Weiterhin musst Du Deklarationen, die nur für die erste Ebene gelten sollen, ggf. für die zweite Ebene zurücksetzen, wenn sie unerwünschterweise auch auf diese angewandt werden.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Also ich kenne es nur so, so muesste es eigentlich gehen:
Code:
a:hover { text-decoration: overline; } So sieht z.B. die Seite "index" aus: Code:
<ul id="navigation"> <li class="naviLink" id="aktiv"><a href="index.htm">Startseite</a></li> <li class="naviLink"><a href="deutschland.htm">Deutschland</a></li> <li class="naviLink"><a href="amerika.htm">Amerika</a></li> <li class="naviLink"><a href="frankreich.htm">Frankreich</a></li> <li class="naviLink"><a href="england.htm">England</a></li> <li class="naviLink"><a href="Videobase.htm">Videobase</a></li> </ul> Code:
<ul id="navigation"> <li class="naviLink" ><a href="index.htm">Startseite</a></li> <li class="naviLink" id="aktiv"><a href="deutschland.htm">Deutschland</a></li> <li class="naviLink"><a href="amerika.htm">Amerika</a></li> <li class="naviLink"><a href="frankreich.htm">Frankreich</a></li> <li class="naviLink"><a href="england.htm">England</a></li> <li class="naviLink"><a href="Videobase.htm">Videobase</a></li> </ul> Code:
#aktiv { text-decoration: overline; } Ich hoffe, ich konnte helfen. lg. |
Stichwörter |
menue, strich über dem text |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
horizontales Bildernavi mit hover, active usw. | ronjambo | CSS | 9 | 03.08.2010 00:25 |
Multi-Level Navigation mit Grafiken | koncrete | CSS | 3 | 02.08.2008 03:28 |
Scrollbares Textfeld mit purem CSS | Dancer | CSS | 6 | 24.01.2005 16:58 |
Kommentare nach "clear" unter dem Menü | Knuddelkamel | CSS | 9 | 30.11.2004 23:23 |
image vor Link, wenn hover und active. Aber wie??? | 18inch | CSS | 3 | 27.09.2004 04:07 |