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 { display:block; .. }这将显示在 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这意味着它根本不会显示。另外两种最常见的显示类型是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 回答