Проблемы с CSS при выпадающих списках - PullRequest
Новая
       15

Проблемы с CSS при выпадающих списках

0 голосов
/ 02 января 2012

uДетские страницы отображаются в горизонтальной линии под ссылкой родительской страницы в навигации.Я не могу понять, где CSS не так.Вы можете видеть то, о чем я говорю здесь (ссылки на Образцовой странице - те, о которых идет речь): http://sitetest3.talktothedogs.com.

HTML для навигации (автоматически генерируется WP) 

<div id="nav">
<div class="menu">
<ul>
   <li class="current_page_item"><a href="http://sitetest3.talktothedogs.com/" title="Home">Home</a></li>
   <li class="page_item page-item-2"><a href="http://sitetest3.talktothedogs.com/?page_id=2">Sample Page</a>
      <ul class='children'>
         <li class="page_item page-item-4"><a href="http://sitetest3.talktothedogs.com/?page_id=4">Testing page 2</a></li>
         <li class="page_item page-item-6"><a href="http://sitetest3.talktothedogs.com/?page_id=6">Testing page 1</a></li>
      </ul>
   </li>
</ul>
</div>
</div>

Мой код CSS 

.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { } 
.menu li.current_page_item a:hover{ }

Любая помощь будет оценена.Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 02 января 2012

Измените свой CSS следующим образом: 

.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }

Вот как это будет выглядеть
Here is how this would look

0 голосов
/ 02 января 2012

Ваша первая строка в CSS: 

.menu, .menu ul { ... }

устанавливает высоту обоих <div class="menu"> И <ul> в этом .menu на одинаковую высоту.Все меню ограничено контейнером высотой 29 пикселей.

...