Menu BG height not going all the way

I am trying to get the bg the height of the #Topmenu (100px) but it is just staying around the bg image of the menu.

I have tried everything and know I am probably missing something so simple.

CSS

  /* Top Navigational Menu */
#TopMenu {
    position: absolute;
    right: 10px;
    font-size: 10px;
    text-align: right;
    height:100px;
    background-color:#ffffff;
}

#TopMenu ul, #TopMenu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#TopMenu ul li {
    display: inline;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding: 40px 4px 0 6px;
        top: 40px;

}

#TopMenu ul li.First {
    border-left: 0;
}
#TopMenu ul li.home {
    background:url('../images/menu/home-bw.png') no-repeat center;
    height:50px; width:50px;
}
#TopMenu ul li.home:hover {
   background:url('../images/menu/home-rgb.png') no-repeat center;
}

#TopMenu a {
    color: #333;
}

#TopMenu a:hover, #TopMenu a:visited {
    color: #333;
}

#TopMenu ul li.active {
    background-color:#ffffff;
}

#TopMenu li div {
    display: inline;
}

HTML

 <div id="TopMenu" class="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget">
                                    <ul id="menu" style="display:">
                                        <li class="HeaderLiveChat" style="display:none"></li>
                                        <li class="First active home" style="display:">
                                            <a href="#">Home</a>
                                        </li>
                                        <li style="display:">
                                            <a href="#">Services</a>
                                        </li>
                                        <li style="display:">
                                            <a href="#">Service Area</a>
                                        </li>
                                        <li style="display:">
                                            <a href="#">About Us</a>
                                        </li>
                                        <li style="display:">
                                            <a href="#">Why Choose Us</a>
                                        </li>
                                        <li style="display:">
                                            <a href="#">Contact</a>
                                        </li>
                                    </ul>
                                    <br class="Clear">
                                </div>
    
                            </nav>
                        </div>

Any help clearing this brain fart would be appreciated.

I’m not sure I understand. I copied your markup to a test file, and changed the background color to red just to make it easier for me to see, and the background height of #TopMenu is 100px.

Do you have other markup (css most likely) which is overriding it? Right clicking on the element and inspecting the element should give you some more direction.

laflair13,

When you send us a code sample, please make it in the form of a working page - starts with doctype, ends with close html - that demonstrates the problem so we can actually see what you see.

Code snippits that do not demonstrate a problem require us to ask for more information or guess.

You are failing to respect our need to be able to demonstrate the problem on our computers in order to troubleshoot.

Pretend you are in our shoes. What would you need to see?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.