2016-07-11 4 views
0

でスタイルを削除するのに役立つ私のサイトはwww.svenskasjoar.seに位置しており、私は小さな英国フラグ(25x16px)を追加するwhantCSSメニュー、UL李リスト

UL-list内のボタンを追加する助けが必要メニューの "RBN"の右側に表示されます。

メニューがで構築されています。

<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*/ 
} 

、どのように私は、メニュー項目(または単にclickablleの画像リンク)としてフラグを表示するには、CSSを編集することができます?旗は決してスタイリングされてはならず、旗の上に乗るとき、背景の吹き出しは見えてはならない。

ここで完全に失われています - :CSSはブラックマジックのようです idnameを使用してアドレス指定を試みましたが、変更はありませんでした。

答えて

0

使用李:セレクタ

前にこの

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

などがこれが動作するようには思えない - 行2上のメニュー項目の一部を配置し、すべてのメニュー項目間のフラグを配置します。 Flag not cklickable – user3260939

+0

追加のテストをしました。 CSSでul:afterを追加すると、フラグを置くことができますが、どうすればクリック可能になりますか?リールの上に別のスタイリッシュな方が良いでしょう... – user3260939

+0

チップで間接的に解決! – user3260939