独自のデザインを使用して Web サイトを作成していますが、最近問題が発生しました。メニュースタイルの配置方法についてです。この問題は説明が難しいので、まず画像を示します。
次のようになります:
http://i.imgur.com/XINIlXC.jpg
次のように
なり
ます: http://i.imgur.com/RKrFZVz.jpg
、しかし、トリッキーな部分はコーナーです。すべてが完全に機能するイメージでは、リストと互換性のない乱雑なコードを使用します。これは、後でドロップダウン メニューに必要になります。
したがって、これは厄介なコードです。
<div class="menu" id="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>
</div>
span.ms は単なるメニュー セパレータです。他のすべての部分については、css コードを示します。
#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it's position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;
これ
は修正されたコードですが、何らかの理由で画像が機能していません。
<div class="menu" id="menu-item">
<div class="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>
<ul id="nav">
<li> Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>
そして、ul と li の追加の CSS 行:
#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}
それだけで、タグがすべてを台無しにする理由がよくわかりませんが、それを行うにはタグが必要です。誰かがそれを修正する方法、または私に道を示すことができますか? 本当にありがたいです。
乾杯 ：）