Jump to content
Sign in to follow this  
Michael

Помогите с Меню на сайте

Recommended Posts

Всем добрый вечер. Возникла одна проблема. Скорее всего это связано с CSS, но после долгих попыток я ничего не смог сделать. Чую, что нужно подправить всего лишь одну строчку, но я не в состоянии. Если требуются серьезные правки, то готов заплатить.

 

Код меню:

<div id="cssmenu">
<ul>
   <li><a href="/"><span>Главная</span></a></li>
<li><a href="/news/"><span>Новости</span></a></li>
    <li><a href="/"><span>Новичкам</span></a></li>
    <li><a href="/"><span>DOTA 2</span></a></li>
    <li><a href="/"><span>DOTA 2</span></a></li>
</ul>
</div>

CSS:

#cssmenu{width:1000px; margin:34px auto; height:37px; display:block; padding:0;} 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; } 
#cssmenu > ul > li > a:after{ content:''; position:absolute; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#8cbb43; border-color:#fff; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;border: 2px solid #8cbb43;} 
#cssmenu ul li.has-sub > a:hover{background:#8cbb43; border-color:#fff;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#fff; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#202020; text-decoration:none;} 
#cssmenu > ul > li > ul > li a:hover{ background:#8cbb43;} 
#cssmenu {background: #fff;}
#cssmenu{border-color:#8cbb43;} 
#cssmenu > ul > li > a{color:#202020;} 
#cssmenu > ul > li > a:after{border-color:#6ed1ff;} 
#cssmenu > ul > li > a:hover{background:#8cbb43;}

Проблема заключается вот в этом:

04ad223636c0.jpg

 

Как видите последняя ссылка в меню немного съезжает.

 

Share this post


Link to post
Share on other sites

разве по коду непонятно, что да, при наведении?

сайт лучше сюда скиньте, чтобы не было бесполезных сообщений: "дайте сайт в личку", если вам конечно еще не помогли

Share this post


Link to post
Share on other sites

Приведённый код на самом деле работает нормально (проверил в разных браузерах и doctype), проблема скорее всего в "соседних дивах и css" которые только на сайте можно увидеть.

Чую, что нужно подправить всего лишь одну строчку

В таком громоздском коде css для простой менюшки можно и компактнее сделать, минимум раза в два.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...