#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0

    Nested List Styling Help


    HTML

    <section id="left_menu">
    <h1>Undergraduate Programs</h1>
    <nav id="left_nav">
    <ul>
    <li><a href="">UG Home</a></li>
    <li><a href="">Calendar</a></li>
    <li><a href="">FAQ</a></li>
    <li>Academics
    <ul class="sub_menu">
    <li><a href="">Catalog</a></li>
    <li><a href="">Course Evaluation</a> </li>
    <li><a href="">Honor Society</a></li>
    <li><a href="">Registrar</a></li>
    <li><a href="">Study Plans</a></li>
    <li><a href="">Tutoring</a></li>
    <li><a href="">Undergrad Academics</a></li>
    </ul>
    </li>
    <li>Research
    <ul class="sub_menu">
    <li><a href="">Computational Systems Biology</a></li>
    <li><a href="">Secure Database Lab</a></li>
    <li><a href="">Secure Systems</a></li>
    <li><a href="">Underwater Networking Lab</a></li>
    <li><a href="">Visual Computing</a></li>
    </ul>
    </li>
    </ul>
    </nav>
    </section>

    CSS

    #left_menu ul
    {
    list-style-type: none;
    margin: 0;
    padding: 0;

    }
    #left_menu li
    {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: white;
    background-color: #cccccc;
    text-align: right;
    padding-right: 39px;
    padding-top: 8px;
    padding-bottom: 8px;

    }

    #left_menu a
    {
    color: #366;
    text-decoration:none;
    font-weight: bold;
    font-size: 14px;
    }
    #left_menu a:hover
    {
    color: #366;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    }

    Question
    How can I make the links under ul class="sub_menu" to NOT have a bottom border?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    16
    Rep Power
    0
    How does this work? I cleaned up a couple things. Hopefully that works for you.

    PHP Code:
    <html>

    <
    head>
    <
    style>
    #left_menu ul
    {
    list-
    style-typenone;
    margin0;
    padding0;

    }    
    #left_menu li 

    border-bottom1px solid #fff; /* put all the styling elements on 1 line, instead of 3 different calls to 'border-bottom'*/
    background-color#cccccc;
    text-alignright;
    padding-right39px;
    padding-top8px;
    padding-bottom8px;

    }

    #left_menu a 
    {
    color#366;
    text-decoration:none;
    font-weightbold;
    font-size14px;
    }
        
    #left_menu a:hover
    {
    color#366;
    text-decorationnone;
    font-weightbold;
    font-size14px;
    }


    </
    style>
    </
    head>
    <
    section id="left_menu">
    <
    h1>Undergraduate Programs</h1>
    <
    nav id="left_nav">
    <
    ul>
    <
    li><a href="">UG Home</a></li>
    <
    li><a href="">Calendar</a></li>
    <
    li><a href="">FAQ</a></li>
    <
    li>Academics</li/* closed this </li> */
    <ul class="sub_menu">
    <
    li><a href="">Catalog</a></li>
    <
    li><a href="">Course Evaluation</a> </li>
    <
    li><a href="">Honor Society</a></li>
    <
    li><a href="">Registrar</a></li>
    <
    li><a href="">Study Plans</a></li>
    <
    li><a href="">Tutoring</a></li>
    <
    li><a href="">Undergrad Academics</a></li>
    </
    ul>
    </
    li>
    <
    li>Research</li/*  Closed this </li> as well */
    <ul class="sub_menu">
    <
    li><a href="">Computational Systems Biology</a></li>
    <
    li><a href="">Secure Database Lab</a></li>
    <
    li><a href="">Secure Systems</a></li>
    <
    li><a href="">Underwater Networking Lab</a></li>
    <
    li><a href="">Visual Computing</a></li>
    </
    ul>
    </
    li>
    </
    ul>
    </
    nav>
    </
    section

IMN logo majestic logo threadwatch logo seochat tools logo