How to remove right border


Tags: html,css,border

Problem :

Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!

HTML :

<section class="menu">
        <ul>
            <li><a class="active" href="#"> PORTFOLIO </a>
                <ul>
                    <li><a href="#"> illustrations </a></li>
                    <li><a href="#"> portraits </a></li>
                    <li><a href="#"> environments </a></li>
                    <li><a href="#"> life drawings </a></li>
                </ul>
            </li>

            <li><a href="#"> STORE </a>
              <ul>
                    <li><a href="#" target="_blank"> society6 </a></li>
                    <li><a href="#" target="_blank"> redbubble </a></li>
                </ul>
            </li>
            <li><a href="#"> CONTACT </a></li>
            <li><a href="#"> ABOUT </a></li>
        </ul>

    </section>

CSS :

.menu {
height:29px;
width:100%;
/*background:orange;*/
}

.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}

.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}

.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none; 
font-size:20px;
font-weight:strong;
padding-right:25px;

}

.menu ul li a:hover, .active {
color:#788d35
}

.menu ul li ul {
display:none;
}

.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;

}

.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}

.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}


Solution :

This removes border from the main menu (after the last item About) :

.menu ul li:last-child{ border:none; }

JSFiddle

If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :

JSFiddle


    CSS Howto..

    How can I put a inside of an ? [duplicate]

    How to hide submenu until it is hovered over by mouse

    how to add a different css to last mysql query result using php

    How to make children auto fit parent's width only with CSS?

    How to stop css class on textbox

    AngularJS: How to unselect a span when selecting another

    how to add a different text box in input text type

    How to mail HTML/CSS output as attachment?

    How to set a image/icon width that was specified through css content property?

    CSS can't be overwritten, no matter how ; Wordpress with responsive style_options.php

    How to make a div with arrowlike side without css border tricks?

    Test if is visible with ng-show attribute

    CSS - How to add dot between navigation title

    How to make a smooth dashed border rotation animation like 'marching ants'

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How to create a CSS shade effect with a faded sidebar

    Showing the child category when Clicking the parent category

    How can I divide a div element's content with CSS selector?

    How to position div which contains font-awesome icons to centre of another div?

    How to Make Glossy Colors in CSS. [closed]

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    How to show only the div with id while hiding other divs using CSS only

    How come my