2016-07-11 7 views
0

Hilfe benötigen Sie eine Taste in ul-Liste hinzugefügtCSS Menü Hilfe Stil in ul li Liste entfernen

Meine Seite bei www.svenskasjoar.se befindet und i whant einen kleinen uk-flag (25x16px) hinzufügen rechts von "RBN" im Menü.

Das Menü wird gebaut mit:

<ul class="glossymenu"> 
<li<? if ($self == "index") { echo " class=\"current\""; }?>><a href="index.php"><b>Start</b></a></li> 
<li<? if ($self == "blog") { echo " class=\"current\""; }?>><a href="blog.php"><b>Blogg</b></a></li> 

CSS:

.glossymenu{ 
position: relative; 
padding: 0 0 0 0px; 
margin: -15px auto 0 0; /* 0 auto 0 auto; */ 
background: url(media/menub_bg.gif) repeat-x; /*tab background image path*/ 
height: 46px; 
list-style: none; 
} 

.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; 
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ 
height: 46px; 
line-height: 46px; 
text-align: center; 
cursor: pointer;  
} 

.glossymenu li a b{ 
float: left; 
display: block; 
padding: 0 24px 0 8px; /*Padding of menu items*/ 
} 

.glossymenu li.current a, .glossymenu li a:hover{ 
color: #fff; 
background: url(media/menub_hover_left.gif) no-repeat; /*left tab image path*/ 
background-position: left; 
} 

#glossymenuuk{ 
color: #1ff; 
background: none; 
//background: url(media/menub_hover_left.gif) no-repeat; /*left tab image path*/ 
//background-position: left; 
} 

.glossymenu li.current a b, .glossymenu li a:hover b{ 
color: #fff; 
background: url(media/menub_hover_right.gif) no-repeat right top; /*right tab image path*/ 
} 

.glossymenu li.current a, .glossymenu li a:active{ 
color: #fff; 
background: url(media/menub_hover_left.gif) no-repeat; /*left tab image path*/ 
background-position: left; 
} 

.glossymenu li.current a b, .glossymenu li a:active b{ 
color: #fff; 
background: url(media/menub_hover_right.gif) no-repeat right top; /*right tab image path*/ 
} 

Nun, wie ich die CSS bearbeiten kann, die die Flagge als Menüpunkt (oder auch nur einen clickablle Bildlink) anzuzeigen ? Die Flagge darf nicht gestylt werden, und der Hintergrund-Schwebeflug darf nicht sichtbar sein, wenn man über die Flagge schwebt.

Vollständig verloren hier | -: CSS ist wie Black Magic Habe versucht, ID mit #name aber keine Änderung zu adressieren.

Antwort

0

Verwendung li: vor Selektor

Gefällt Ihnen dieses

li:before{ 
    display: inline-block; 
    content: ' '; 
    background: ('path_to_your_flag') no-repeat 0 0; 
    width: 30px; /*size of pic*/ 
    height: 30px: 
} 

li a{ 
padding-left: 40px; 
} 
+0

Diese Arbeit scheint nicht - stellt einige der Menüpunkte auf Zeile 2 und stellt die Flagge zwischen jedem Menüpunkt. Flagge nicht klickbar – user3260939

+0

Habe einige zusätzliche Tests gemacht. Wenn ich eine ul hinzufügen: nach in CSS kann ich die Flagge platzieren, aber wie bekomme ich es klickbar? Wäre besser mit einem separaten Styl auf einer li ... – user3260939

+0

indirekt durch die Spitze gelöst! – user3260939