简体   繁体   中英

Can't get my menu to look right, what am I doing wrong?

I can't seen to get my menu looking right.

在此输入图像描述

Above, is what it should look like. But I can't get it to look like that. What am I doing wrong?

                <ul id="MainMenu">
                    <li>a</li>
                    <li>b
                        <ul>
                            <li>1</li>
                            <li>2</li>
                        </ul>
                    </li>
                    <li>c
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>    
                    </li>
                </ul>



#MainMenu {
    list-style-type: none;
}
#MainMenu li {
    display: inline;
}

Should be:

#MainMenu li {
  display: block;
}

you need 4steps for that sinceyou have multiple LI in different levels

*{
   /* all sector for reset */
   padding:0;
   margin:0;

}
   #MainMenu {

    }
    #MainMenu >li {
        /*level 1 from root*/
    }
    #MainMenu ul {

    }
    #MainMenu ul li {
        /*level 2 from root*/
    }
    #MainMenu li {
        list-style-type: none;
        /*all levels from root*/
    }

then for you to see what is happening we first add this css to the first level of LIs

DEMO: http://jsfiddle.net/LcDY9/

#MainMenu >li {
    display:inline-block;
    text-align:center;
    border:1px solid;
    width:100px;
    height:100px;
    vertical-align:top;
}

now we add the all selector

http://jsfiddle.net/LcDY9/1/

*{

    padding:0;
    margin:0;
}

在此输入图像描述 and finally we add padding to all LIs http://jsfiddle.net/LcDY9/2/

#MainMenu li {
    list-style-type: none;
    padding-top:6px;
}

and remove the solid border the have what you are looking for

border:1px solid; 在此输入图像描述

Try something like this:

#MainMenu {
    list-style-type: none;
}
#MainMenu>li {
    float: left;
    margin-right: 10px;
}
#MainMenu ul li {
    list-style: none;    
}
#MainMenu ul {
    padding: 0;
}

JS Fiddle http://jsfiddle.net/L2wsA/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM