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 />を<li>の間に挿入すると、HTMLは検証されません。

float: none;で修正しようとしましたが、CSSのfloat: right;が原因だと思います。

水平方向ではなく垂直方向にドロップする方法がありますか、<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の2つのことです。 –

マージンは要素の外側にスペースを追加します。パディングは要素内にスペースを追加します。 – 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

私のウェブサイトは背景だけを表示します –

その意味？タグを削除する

なぜ「

答えて

関連する問題