title: How to remove right border
body: <p>Do you guys have any idea how to remove the right border on my drop down menu? I tried putting <em>right-border: none</em>, <em>right-border: hidden</em>, and <em>right-border: 0px</em> but nothing!</p>
  
  <p><strong><em>HTML :</em></strong></p>
  
  <pre><code>&lt;section class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="active" href="#"&gt; PORTFOLIO &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt; illustrations &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt; portraits &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt; environments &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt; life drawings &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt; STORE &lt;/a&gt;
                &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" target="_blank"&gt; society6 &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" target="_blank"&gt; redbubble &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; CONTACT &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; ABOUT &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p><strong><em>CSS :</em></strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.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 &gt; 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; /* &lt;---- DOES NOT WORK */
  }
  </code></pre>