navigation - 显示:none; and display:block; in a naviation menu

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 { 显示:none; 是什么意思？ } 做什么？

另外display: block;这在我的代码(上面)中起什么作用？

Answer 1

li ul { 显示:无； } 将隐藏 li 标签下定义的 ul 列表。

li:hover ul { 显示: block ; .. } 这将显示 li 标签下定义的隐藏 ul 列表 block