CODEWITHSUNDEEP
htmlcss
user3490954
user3490954

Reputation: 57

Styling UL for Navigation Submenu

I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.

I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help

#Contentmenu ul {
    margin: 0; 
    padding: 40px;
    margin-left:auto;
    margin-right:auto;
    width:960px;
    list-style-type: none; 
    list-style-image: none; 
}

#contentmenu li {
    display: inline; 
    padding:10px;  
    float: left;
}

#contentmenu a {
    display:block;
    padding:10px;
    width:200px;
    color:#ffffff;
    font-size:26px;
    background-color:#c7daff;
}


#Contentsubmenu ul {
    margin: 0; 
    margin-left:auto;
    margin-right:auto;
    width:960px;
    list-style-type: none; 
    list-style-image: none; 
}

#contentsubmenu li {
    display:block;
    floa:left;
}

#contentsubmenu a {
    display:block;
    width:200px;
    color:#000000;
    font-size:20px;
    border-bottom:solid;
    border-bottom-width:1px;
    background-color:#ffffff
}

HTML

<div id="contentmenu">
<ul>
    <li><a href="#">Header 1</a>          
    <div id="contentsubmenu">
        <ul>
            <li><a href="#">Article 1</a></li>
            <li><a href="#" Article 2</a></li>
        </ul>
    </div>
    </li>
    <li><a href="#">Articl3</a></li>
</ul>

Upvotes: 1

Views: 70

Answers (2)

SeldonSeen
SeldonSeen

Reputation: 49

if you want to only target the top-level , you would use this:

#contentmenu > ul

and

#contentmenu > ul > li

Also, CSS is case-sensitive, so make sure you are using #contentmenu

Does this fix your other issue as well?

Upvotes: 1

KittMedia
KittMedia

Reputation: 7466

Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.

Demo on JSFiddle

Therefore that you are new in CSS: Try to write clean code with correct indentations.

Upvotes: 0

Related Questions