0 
<html>

<head>

<style type="text/css">

   ul{
      list-style:none;
      padding:0;
      margin:0;


   }

   li{
      float: left; 
      border: dotted 1px;
      line-height: 30px; 
      color:green;
      width: 100px;

      }
    ul li ul li{
    color:violet;
    width: 150px;

    }

</style> 
</head>
<body> 
<ul id="wow">
   <li>example 1</li>
   <li>example 2
      <ul><li>example1</li>
      <li>example1</li><li>
      example1</li></ul>
   </li>
   <li>example 3
   <ul><li>example1</li>
      <li>example2</li>
      <li>example3</li></ul>
   </li>
   <li>example 4</li>
   <li>example 5</li>
   <li>example 6</li>
   <li>example 7</li>      
</ul>   
</body>   
</html>

これは私のコードです。私の質問は、css でリストの高さのプロパティを設定すると、リストとサブリストの間に重複があるのはなぜですか?どうすればこれを解決できますか?

4

3 に答える 3

2

あなたのサブULリストはメインliの子です。つまり、liアイテムの直後から始まります。したがって、その高さを。として作成しline-heightます。 

    li{
      float: left; 
      border: dotted 1px;
      line-height: 30px; color:green
      }
    ul li ul li{color:violet /*write declaration for sub menu here*/}​

デモ

お役に立てれば。メニュー項目にマウスを合わせると、サブメニューが表示されます。

デモ2

于 2012-11-30T07:08:55.027 に答える
0

コードの問題は、サブアイテムをその親に対して相対的に配置する必要があることでした。ナビゲーションバーを作成するには、次の手順を試してください。

 ul{
      list-style:none;
      padding:0;
      margin:0;          
   }

   li{
      float: left; 
      border: dotted 1px;
      height: 30px;
      position:relative;
   }

   ul li ul{
        position:absolute;
        top:100%;
   }

このデモを確認してください。

于 2012-11-30T07:07:53.943 に答える
0

これをチェックして：

li /* list and sub list */
{
  float: left; 
  border: dotted 1px;
  line-height: 30px; /* Instead of Height property */
}

ul>li>ul>li /* sub list */
{
   float: left; 
   border: dotted 1px;
   line-height:25px; /* give smaller height as you want */
}

CSS セレクターの詳細については、このリンクを参照してください。

于 2012-11-30T07:25:33.840 に答える