Jump to content
  • 0

Проблема в верстке меню


dartwlad
 Share

Question

Всем доброго времени суток! Смотрите, проблема вот в чем. Есть меню, вертикальный аккордеон, несколько уровней. Все хорошо работает, но только вот есть проблема в css.

027b784f7ecb.png

Проблема в том, что открытые серые <li>(те, что светлее) по высоте больше, чем надо. И главное, что в коде пэддинг стоит только для верха и левой стороны этого <li>, но почему-то он и вниз растягивается, что и не очень выглядит, потому что сами эти <li> больше главных лишэк. Вот css:


.topnav {
background: #d3d3d3;
width: 268px;
padding:0;
list-style:none;
}
.topnav ul{
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
.topnav li {
width:268px;
list-style: none;
background:#a5a5a5;
margin-top:4px;
margin-bottom:4px;
}
.topnav li a {
display: block;
line-height: 40px;
text-indent:10px;
color:#000000;
width: 268px;
height: 43px;
text-decoration: none;
font-size: 13px;
font-weight: normal;
outline:none;
}
.topnav li a:hover {
display: block;
color:#424242;
text-decoration:none;
}
.topnav ul ul {
background:#ededed;
width:268px;
padding: 5px 0 0px 0;
display:none;
}
.topnav ul ul li {
margin: 0;
padding: 0;
clear: both;
margin-bottom:3px;
}
.topnav ul ul li a {
width:262px;
padding:15px 0px 0px 6px;
line-height: 12px;
text-decoration: none;
color: #000;
text-indent:0px;
font-size:12px;
background: #bfc0c0;
}
.topnav ul ul li.active a {
color: #000;
font-weight: bold;
}
.topnav ul ul li a:hover {
background: #cbcccc;
padding:15px 0px 0px 6px;
width:262px;
line-height: 12px;
color: #424242;
font-size:12px;
}
.topnav ul ul ul li a {
color:#444;
padding-left:10px;
}
.topnav ul ul ul li a:hover {
background-color:#D3CEB8;
color:#675C7C;
}
.topnav ul span{float: right;clear:both; padding-right:10px}

Заранее спасибо за помощь!

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   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.

 Share

  • Similar Content

    • By Smart_Bomber
      Есть меню, но дело в том, что непонятно откуда берется довольно таки большой отступ. Верстаю не так давно, поэтому вполне мог и нахимичить. Прошу помощи
      body { margin: 0; padding: 0; width: 100%;}.menu { list-style: none;}.menu li { text-align: center; width: 14.28%; margin-left:0; margin-right: 0; padding:0 0; background: #E0EEEE; float: left; font-size: 32px; font-family: Calibri;}.menu a { text-decoration: none; color: #000; display: block;}.menu a:hover{ background: #C1CDCD; transition-property: background; transition-duration: 0.5s;}.main { display: block; width: 100%; overflow: hidden;}
    • By justwhite.design
      Приветствую уважаемые коллеги, мой опыт верстки довольно хороший, вот только опыт английского не очень велик, если найдется кто поможет, в приоритете ссылки на рускоязычные сайты, буржуйские конечно тоже приветствуются.
      В общем проблема в следующем, есть меню, диагональное меню http://clip2net.com/s/50cAtD вот такое, я понятия не имею как его верстать, уже и так и сяк, не буду говорить что перерыл весь интернет, но по запросам "нестандартное меню, Диагональное меню ... " перерыл google до 10 страницы, а дальше сами понимаете, прошу помощи, может кто делал, кто знает.
      За ранее спасибо, буду благодарен за любой ответ.
    • By Imperil
      День добрый!
      Есть вот такое вот меню:
      А как его сверстать правильно и практичнее всего будет - нет идей. Сложность - в загнутых уголках по бокам.
      Или тупо вставить все это дело картинкой? Но правильно ли это будет, и плюс ко всему нужно ведь, чтобы этот уголок потом тянулся в зависимости от размера монитора на всю ширину.
      Что посоветуете?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy