Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Rajinder Sihota
Rajinder Sihota
3,473 Points

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

Rajinder Sihota
Rajinder Sihota
3,473 Points

You are the man Ben Dickie, worked nicely.