Home/ Questions/Q 8917677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T05:32:59+00:00

<html> <head> <style type=text/css> ul{ list-style:none; padding:0; margin:0; } li{ float: left; border: dotted

  • 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>

This is my code. My question is why when I set my height properties for list in css, there is a overlapping between the list and sub-list?how can I solve this

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your sub ul list is child of main li that is y it is starting exactly after the li item. So Make that height as 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*/}​

    DEMO

    Hope this helps. Mouse over on the menu items to see the sub menu.

    DEMO 2

    • 0