Home/ Questions/Q 548423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T11:04:38+00:00

Please refer the below code. I want the boxes for Blue and all other

  • 0

Please refer the below code. I want the boxes for Blue and all other color to be stretched. I mean it should start and end with the border of Styles and Colors.

Thanks 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Component5 colors</title>

        <style type="text/css">
            .theoneclicked {
                background-color:#b0c4de;
            }
            ul {
                display: block;
                list-style: none;               
            }
            ul#nav_top {
                width:100px;
                border: 1px solid black;
            }
            li#nav_top1, li#colors {
                width:100px;
                border: 1px solid black;        
                display: block;

            }

             li#nav_mid1 {
                border: 1px solid black;

             }
            a {
                text-decoration:none;
            }

        </style>
    </head>
    <body>
        <ul id="nav_top">
            <li id="nav_top1"><span class="heading"><a href="comp5.html">Styles</a></span></li>
            <li id="colors"><span class="theoneclicked"><a href="colors.html">Colors</a></span></li>
                <ul id="nav_mid">
                    <li id="nav_mid1">
                        Blue                        
                    </li>
                    <li id="nav_mid1"> Orange</li>
                    <li id="nav_mid1">Green</li>
                </ul>
            <li id="images"><span class="nav">Images</span></li>
        </ul>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For starters, your HTML is invalid. A nested ul element should be contained within an li. Also, you can’t repeat nav_mid1 as an ID. You’ll need to use a class for multiple elements.

    Changing the markup and CSS to something the following solves your problem. Notice I’m adding some padding to the left of the nested UL as it’s obviously a subgroup of ‘Colors’.

    <ul id="nav_top">
            <li id="nav_top1"><span class="heading"><a href="comp5.html">Styles</a></span></li>
            <li id="colors"><span class="theoneclicked"><a href="colors.html">Colors</a></span></li>
    <li>
                <ul id="nav_mid">
                    <li class="nav_mid1">
                        Blue                        
                    </li>
                    <li class="nav_mid1"> Orange</li>
                    <li class="nav_mid1 last">Green</li>
                </ul>
</li>
            <li id="images"><span class="nav">Images</span></li>
        </ul>

    CSS

                ul#nav_top {
                width: 100px;
                display: block;
                list-style: none;               
            }
            ul ul {
padding-left: 10px;}
            ul#nav_top li {

                border: 1px solid black;
            }
            li#nav_top1, li#colors {

                display: block;

            }

             ul#nav_mid li {
               border-width: 0 0 1px 0;


             }
#nav_mid li.last {
    border-bottom: none;
}
            a {
                text-decoration:none;
            }
    • 0