2

いくつかの CSS コーディングをもう少し理解しようとしています。ナビゲーションバーをお借りしました。HTML コードは次のようになります。

      <ul>
        <li>
        <a href="">Business</a>
            <ul> 
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            </ul>
        </li>
    </ul>

CSS:

   ul li 
   {
   display: block;
   position: relative;
   float: left;
   font-size:12px;
   top:15px;
   }

   li ul { display: none; }

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


   ul li a 
   {
   display:block;
   text-decoration: none;
   color: white;
   padding: 20px 30px 20px 15px;
   }

   ul li a:hover 
   { 
   background: #F89623;
   }

   /*submenu position*/
   li:hover ul 
   {
   display:block;
   position:absolute;
   left: -30px;
   top:51px;
   }

   li:hover a 
   { 
   background: #F89623;
   }

   /*Background when you mouseover subitems*/
   li:hover li a:hover 
   { 
   background: #FFDEB0;
   }

   /*top nav only*/
  #navigation > ul > li > a {
  font-size: 16px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  }

表示タグの一部がわかりません。何をしli ul { display: none; }ますか？

またdisplay: block;、これは私のコード(上記)で何をしますか?

4

4 に答える 4

2

li ul { 表示: なし; li タグで定義されている ul リストを非表示にします。

li:hover ul {表示:ブロック; .. }これにより、li タグの下に定義された非表示の ul リスト ブロックが表示されます

于 2012-05-23T12:24:44.243 に答える
1

CSS display:none は要素を非表示にすることを意味します。display:block は要素を表示することを意味します。

子孫セレクターを見てみましょう - http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

あなたの場合、

 li ul { display: none; }

LI の子孫である UL が表示されないことを意味します (display:none vs. display:block)。

言い換えると、

<ul id='parentUL'>
   <li id='childLI'>
      <ul id='childUL'>
      </ul>
   </li>
</ul>

childUL は、この CSS に基づいて表示されません。

于 2012-05-23T12:25:09.070 に答える
1 
li ul { display: none; }

li タグ内の ul タグを非表示にします。

display: block;

これは、div または段落のように表示されます。（見えるようになります）

于 2012-05-23T12:25:12.560 に答える
0

表示モードを切り替えるだけです—要素がページ上でどのように動作するか。ご想像のとおり、noneまったく表示されないことを意味します。他の2つの最も一般的な表示タイプはとinlineですblock。

インライン要素は、、、などの<a>要素<span>です<img>。前のコンテンツと同じ行に配置されます。

ブロック要素は、<div>またはなどの要素<h1>です。それは新しい行にそれ自体を配置し、通常はコンテナの幅全体を埋めます。ブロック要素は、パディング、境界線、マージンなどで操作することもできます（ボックスモデル）。

tableまたはなど、他にも多くの表示モードがありますinline-block。表示モードについてお読みになることをお勧めします。始めるための良いリソースは次のとおりです：http ：//www.quirksmode.org/css/display.html

編集：
私<img>は技術的に純粋なinline要素ではないことを知っています。インラインで表示されますが、従来の要素とは異なり、幅や高さなどの属性inlineがある場合があります。block実際には、それはより多くのinline-block要素であるかもしれませんが、それは別の日の議論です。;）

于 2012-05-23T12:45:55.873 に答える