Page 1 of 1

css Problem Menu hover

Posted: Tue Jul 18, 2017 10:11 am
by aceaccis
Hi all,

had anybody an Idea how I could realise following Problem with css ?

In my menu strukter I would have an sign added on the aktive link like on Page 1.1 (L2) link

It could be by special sign ASCI my preference would be » or >>

Code: Select all

Menu Levels 1
  Menü-Ebenen [de]
  >> Page 1.1 (L2)   --> Page 1.1 (L2) open and on focus
  Page 2.1 (L2)
Menu Levels 2
My aktual css for a:hover and a:focus looks like :

Code: Select all

/* Text Flow and List */

 a{text-decoration:none;color:#111111;font-weight:inherit;font-style:inherit}
 a:focus{color:#c0c0c0}
 a:hover{text-decoration:underline;color:#000080}
 a:hover::before { content: " » "; color: firebrick; font-size: 1em; }
 a:visited{color:#666}
 li{line-height:1.6em}
 ul,ol{margin-bottom:10px;list-style:none; text-align: left;padding: 0px 0px 0px 3px;}
 blockquote{font-style:italic;border-left:5px solid;padding:1px 0 1px 12px;margin:16px 0 16px 16px;color:#777;font-size:1.2em
}
for hover it works fine with

Code: Select all

::before
but how could I realise this with the active link ?

Thanks Chris

Re: css Problem Menu hover

Posted: Tue Jul 18, 2017 10:29 am
by frase
Wenn ich das richtig verstehe, willst du den aktiven Menüpunkt besonders stylen?
Der aktive Menüpunkt ist (normalerweise) kein Link sondern hat ein <span>.
So kannst du den also bearbeiten:

Code: Select all

.menulevel1 span::before {
    content: "»";
    ...
Nachtrag
Evtl.: .menulevel1 li span::before
Das sollte sich auf die weiteren Level vererben.
mit .menulevel2 usw. kannst du das auch unterschiedlich stylen.

Re: css Problem Menu hover

Posted: Tue Jul 18, 2017 1:21 pm
by aceaccis
Hi Frase,

perfekt ja genau das habe ich gesucht.

Danke dir !!!

Gruß Chris