Sign in to follow this  
Followers 0
Michael

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

13 posts in this topic

Всем добрый вечер. Возникла одна проблема. Скорее всего это связано с 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

Напишите в лс ссылку на сайт. Бесплатно вам исправлю.

Michael likes this

Share this post


Link to post
Share on other sites

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

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

Michael likes this

Share this post


Link to post
Share on other sites

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

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

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

Michael likes this

Share this post


Link to post
Share on other sites

Так если при наведении, то это специально так сделано. Ничего плохого в этом нету. Так написали меню вот и все.

Michael likes this

Share this post


Link to post
Share on other sites

@Esite, ну раз соседние дивы создают такую проблему, то можно просто тут для классов наведения задать margin-top: -3px; к примеру :)

Michael likes this

Share this post


Link to post
Share on other sites

Тему можно закрывать. Помог пользователь Macdec. Очень ему благодарен.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.