br не действительны в ul

У меня есть панель навигации на моем сайте.br не действительны в ul

HTML-:

<nav id="navigation"> 
<a href="index.html"> <h1>My Cooking Webpage</h1> </a> 
<ul> 
    <li> 
     <a href="nav/recipes.html" class="right_categories">Recipes</a> 
    </li> 
    <li> 
     <a href="nav/categories.html" class="right_categories">Categories</a> 
     <ul id="subcategories"> 
      <li> 
       <a href="#">Item 1</a> 
      </li> 

      <li> 
       <a href="#">Item 2</a> 
      </li> 

      <li> 
       <a href="#">Item 3</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="nav/about.html" class="right_categories">About Us</a> 
    </li> 
</ul> 
</nav>

CSS-:

#navigation { 
font-size: 24px; 
float: right; 
} 
#featured-image { 
    width: 800px; 
    height: 600px; 
} 
.breadcrumb { 
    font-size: 20px; 
} 
#subcategories { 
display: none; 
} 
nav { 
display: block; 
position: relative; 
} 
nav li { 
    display: block; 
    margin-right: 10px; 
    float: right; 
} 
nav li:hover #subcategories { 
display: block; 
} 
nav a { 
color: white; 
} 
nav ul { 
padding: 0px; 
list-style-type: none; 
} 
#featuredtext { 
position: relative; 
} 
#page-background { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
#wrapper { 
position: relative; 
z-index: 1; 
    padding: 10px; 
} 
#slider_wrapper { 
    width: 100%; 
    text-align: center; 
} 
#navigation { 
width: 100%; 
}

Мои DOCTYPE является HTML5 (<!DOCTYPE html>), если это помогает.

Проблема заключается в том, что при наведении курсора на ссылку «Категории» раскрывающееся окно падает горизонтально, а не вертикально. Когда я помещаю <br /> s между <li> s, HTML не проверяет.

Я думаю, что это из-за float: right; в CSS, хотя я попытался исправить его с помощью float: none;.

Есть ли способ уменьшить его вертикально, а не горизонтально, или есть альтернатива <br />. Я хочу, чтобы HTML проверялся с помощью валидаторов W3C, HTML и CSS.

источник

2012-01-06 Anish Gupta

Единственный действительный дочерний элемент <ul> - это <li>. Создайте верхние и нижние поля <li>, используя CSS, чтобы поместить их вертикальное расстояние. Удалите стиль float, чтобы они отображались как элементы блока, выстроенные вертикально.

источник

2012-01-06 19:31:17 lsuarez

как? 'margin' и' padding' - это две вещи в CSS, которые меня путают –

Margin добавляет пространство вне элемента. Заполнение добавляет пространство внутри элемента. – Scott

Я использовал 'float: none' и немного поля. Благодаря! –

nav li { 
    display: block; <-- remove, this is already a block item 
    margin-right: 10px; <-- move to your A tag declaration and also add display:block to your A tag 
    float: right; <-- remove, this is causing it to be horizontal 
}

источник

2012-01-06 19:32:24

Можете ли вы прояснить, в каком объявлении вы говорили, «перейдите к объявлению тега A и добавьте отображение: блок в свой тег A»? –

Это может помочь: http://preview.moveable.com/JM/ilovelists/ –

На самом деле это не работает, он сделал мой правый навигатор почти поверх моего заголовка. –

Я оптимизировали HTML и CSS таким образом:

<ul class="menu"> 
    <li class="sub"> 
     <a href="nav/recipes.html" class="right_categories">Recipes</a> 
    </li> 
    <li class="sub"> 
     <a href="nav/categories.html" class="right_categories">Categories</a> 
     <ul id="subcategories"> 
      <li class="sub"> 
       <a href="#">Item 1</a> 
      </li> 

      <li class="sub"> 
       <a href="#">Item 2</a> 
      </li> 

      <li class="sub"> 
       <a href="#">Item 3</a> 
      </li> 
     </ul> 
    </li> 
    <li class="sub"> 
     <a href="nav/about.html" class="right_categories">About Us</a> 
    </li> 
</ul>

CSS:

#ul 
    { 
      margin:0; 
     padding:0; 
    } 

    ul.menu li 
    { 
     display:inline; 
     position:relative; 

    } 

    li.sub > ul 
    { 
     display:none; 
    } 

    ul.menu li.sub:hover > ul 
    { 
     position:absolute; 
     top:100%; 
     left:0; 
     display:block; 
    } 

    ul.menu ul li.sub:hover > ul 
    { 
     position:absolute; 
     top:0; 
     left:100%; 
     display:block; 
    }

Теперь это правда.

источник

2012-01-06 19:46:40

теперь мой сайт показывает только фон –

что это значит? удалить тег

Зачем мне удалять '

ответ

Смежные вопросы