Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

CSS drop down menu issues

My nav bar is positioned to the left. I'd like to center it but when I try the center command it just gets all messed up. When I move it to the right it works but that's not what I want.

When I hover over the 'menu' option all the subfolders show up BUT a line shows up that goes straight down the middle which I can't seem to get rid of. I'd also like to get rid of the space at the top and bottom so it's looks cleaner.

All the menu items are centered and I want to move them so they are on the left side but can't seem to find out how to do that.

Here's the html code:

<div id="nav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="/Menu">Menu</a>
                        <ul>
                            <li><a href="/appetizers">Appetizers</a></li>
                            <li><a href="/chefspecials">Chef Specials</a></li>
                            <li><a href="/chickendishes">Chicken Dishes</a></li>
                            <li><a href="/currydishes">Curry Dishes</a></li>
                            <li><a href="/dessert">Dessert</a></li>
                            <li><a href="/noodledishes">Noodle Dishes</a></li>
                            <li><a href="/noodlesoups">Noodle Soups</a></li>
                            <li><a href="/salads">Salads</a></li>
                            <li><a href="/sidedishes">Side Dishes</a></li>
                            <li><a href="/soup">Soup</a></li>
                            <li><a href="/stirfries">Stirfries</a></li>
                            <li><a href="/vegdishes">Vegetarian Dishes</a></li>

                        </ul>
                    </li>
                    <li><a href="/Contact">Contact</a></li>
                    <li><a href="/About">About</a></li>
                </ul>
            </div>

Here's the CSS code:

li {
display: inline;
padding: 5px 15px;
border: 1px solid black;
background-color: #F0EFE9;
font-weight: bold;
width: 15%;
    -webkit-transition: background-color .75s;
    -moz-transition: background-color .75s;
    -o-transition: background-color .75s;
    transition: background-color .75s;
}

ul:first-child {
margin-left: 5%;
}

li a {
font-size: 80%;
text-decoration: none;
color: inherit;
}

li:hover {
color: white;
background-color: #050505;
}

#nav { list-style-type: none; height: 10px; padding: 0; margin: 0; }
#nav li { float: left; position: relative;  padding: 0; line-height: 40px; background:       #A67829; }
#nav li:hover { background-position: 0 0px; }
#nav li a { display: block; padding: 0 0px; color: #fff; text-decoration: none; }
#nav li a:hover { color: #050505; }
#nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #A67829; list-    style-type: none; padding: 0; margin: 0; }
#nav li:hover ul { opacity: 1; }
#nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none;     }
#nav li:hover ul li { height: 10px; line-height: 0px; }
#nav li ul li a { background: #A67829; }
#nav li ul li a:hover { background: #A67829; }

#nav li { -webkit-transition: all 0.2s; }
#nav li a { -webkit-transition: all 0.5s; }
#nav li ul { -webkit-transition: all 1s; }
#nav li ul li { -webkit-transition: height 0.5s; }

www.sunnysihota.com shows what I explained above.

thanks in advance for any help!

Ben Dickie
Ben Dickie
1,559 Points

Hi Rajinder

you might want to try

#nav li ul li a{
line-height:1.8;
text-align:left;
}

#nav li ul li{
border:none;
}

or whatever line height you want, and if you want it further out from edge add some padding and if you want a border add it to the li li a selector

1 Answer

You are the man Ben Dickie, worked nicely.