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; }做了什么？

同样display: block;我的代码（上图）中有什么作用？

Answer 1

li ul {display：none; } 将隐藏在li标签下定义的ul列表。

li：hover ul {display：block; ..} 这将显示在li tag

下定义的隐藏ul列表块

Answer 2

CSS显示：none表示隐藏元素; display：block表示show element。

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

在你的情况下，

 li ul { display: none; }

表示不会显示那些LI的后代的UL（显示：无与显示：块）;

换句话说，

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

将不会根据此CSS显示childUL。

Answer 3

li ul { display: none; }

在li标签内隐藏ul标签。

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元素，但这是另一天的讨论。 ;）

显示：无;和显示：块;在导航菜单中

4 个答案: