顯示：無; 並顯示：塊; 在導航菜單中

Question

我試圖更多地了解一些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; }什么li ul { display: none; } li ul { display: none; }做什么？

同時display: block; 這在我的代碼中（上面）有什么作用？

Answer 1

li ul {display：none; }將隱藏在li標簽下定義的ul列表。

li：hover ul {display：block; ..}這將顯示在li標簽下定義的隱藏ul列表塊

Answer 2

CSS顯示：無表示隱藏元素； display：block表示顯示元素。

看看后代選擇器-http: //www.w3.org/TR/CSS2/selector.html#descendant-selectors

在你的情況下，

 li ul { display: none; }

意味着將不顯示那些作為LI的后代的UL（display：none與display：block）；

換一種說法，

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

將不會基於此CSS顯示childUL。

Answer 3

li ul { display: none; }

將ul標簽隱藏在li標簽內。

display: block;

這將顯示為div或段落。 （它將使其可見）

Answer 4

它只是在顯示模式之間切換-元素在頁面上的行為。 您可能已經猜到了， none意味着它根本不會顯示。 另外兩種最常見的顯示類型是inline和block 。

內聯元素是諸如<a> ， <span>或<img>元素。 它將自身定位在與先前內容相同的行上。

塊元素是<div>或<h1>元素。 它將自己定位在新的一行上，並通常填充容器的整個寬度。 塊元素也可以使用填充，邊框，邊距等（盒子模型）進行操作。

還有許多其他顯示模式，例如table或inline-block 。 我建議您閱讀顯示模式。 這是入門的好資源： http : //www.quirksmode.org/css/display.html

編輯：
我知道<img>從技術上講不是純inline元素。 它的確顯示為行內，但與傳統的行inline元素不同，它可能具有某些block屬性，例如寬度或高度。 實際上， inline-block元素可能更多，但這是另一天的討論。 ;）