CODEWITHSUNDEEP
htmllistcssmenuwidth
ericsicons
ericsicons

Reputation: 1495

<li> not filling space in <ul> in CSS submenu

I am trying to make CSS menu but I am at a loss why the li elements in the submenus wont fill the its parent ul

a sample of the menu is at [ http://www.ericsicons.com/css_sample.html ]

hover over item 3 and item 4, the UL container has a green border, so how to get rid of the margin.

The CSS is as follows

        .mainmenu {
            border-top: 1px solid black;
            border-left: 1px solid black;
            width: 350px;
            padding:0;
            margin: 0;

        }
        .mainmenu a {
            text-decoration: none;
            padding-top: 10px;
            padding-bottom: 10px;
            display: block; 
            width:100%;

        }
        .mainmenu li:hover {
            background-color: lightskyblue;
        }

        .mainmenu li{
            list-style: none;
            text-align: center;
        }
        .mainmenu > li{
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            display:  inline-block;
            width:80px;
        }
        .mainmenu > li li {
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .dropdown{
            position: relative;
        }
        .dropdown:hover > .submenu{

            opacity:1;
        }
        /*submenus*/
        .submenu {

            position: absolute;
            border: 1px solid green;

            opacity:0.0;
            -webkit-transition: opacity 1s ease; 
            -moz-transition: opacity 1s ease; 
            -ms-transition: opacity 1s ease; 
            -o-transition: opacity 1s ease; 
            transition: opacity 1s ease;

        }
        .submenu_first{

            top: 30px;
            left: 0px;
        }
        .submenu_other{
            top: 0px;
            left: 70px;
        }

The HTML

<ul class="mainmenu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li class="dropdown"><a href="#">item 3 ></a>
                <ul class="submenu">
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                </ul>
     </li>
     <li class="dropdown"><a href="#">item 4 ></a>
                <ul class="submenu">
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                </ul>
     </li>
</ul>

Upvotes: 1

Views: 769

Answers (2)

user3757453
user3757453

Reputation: 

.submenu {
padding: 0px;
margin: 0px;
width: 100%;
display: block;

}

Upvotes: 1

gp.
gp.

Reputation: 8225

try this:

.submenu {
    padding: 0px;
    width: 100%;
}

You should also remove the left border on li in .submenu as the .submenu ul already has left border.

Upvotes: 1

Related Questions