additional CSS for nav menu

thanks to WPyogi and Andrew I was finally able to modify my nav-menu

problem in short here is my website check out nav menu
website
I’m tying to make this look like this
menu

details
I wan’t some more feature in my nav menu which wasn’t in the themes for ex : dotted border on one side. I was able to do this by removing border script and adding border-right : 2pt dotted red !important; im my custom css. here is my website.
these are all the nav menu option I can get from my theme

/* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
  #header #navigation {
    display: block !important;
    margin-top: .382em;
  }
  #header #navigation ul.nav {
    float: right;
    /* LEVEL 2 */

    /* LEVEL 3 */

  }
  #header #navigation ul.nav > li a {

    border-right : 2pt dotted red !important;
    background: #fcfcfc;
    font-weight: bold;
    position: relative;
    -webkit-border-radius: 0em !important;
    border-radius: 0em !important;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #header #navigation ul.nav > li a:hover {
    border-color: #e8e3e3;
    background: #fff;
  }
  #header #navigation ul.nav > li:hover a {
    border-color: #e8e3e3;
    background: #fff;
  }
  #header #navigation ul.nav > li.current-menu-item > a,
  #header #navigation ul.nav > li.current_page_item > a {
    color: #ff0c00;
  }
  #header #navigation ul.nav > li.parent a {
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #header #navigation ul.nav > li.parent a:after {
    font-family: 'WebSymbolsRegular';
    display: inline-block;
    font-size: .857em;
    margin-left: .618em;
    content: ";";
    color: #e3d7d7;
    font-weight: normal;
  }
  #header #navigation ul.nav > li.parent a:hover:before {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 99999;
  }
  #header #navigation ul.nav > li.parent:hover a:before {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 99999;
  }
  #header #navigation ul.nav > li.parent:hover a:after {
    color: #ff0c00;
  }
  #header #navigation ul.nav > li.parent ul li a:after {
    visibility: hidden;
  }
  #header #navigation ul.nav > li.parent ul li.parent a:after {
    visibility: visible;
    content: "]";
    float: right;
  }
  #header #navigation ul.nav > li.parent ul li.parent ul li a:after {
    visibility: hidden;
  }
  #header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after {
    visibility: visible;
    content: "]";
  }
  #header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after {
    visibility: hidden;
  }
  #header #navigation ul.nav ul {
    border: 1px solid #e8e3e3;
    margin-top: -1px;
    padding: .372em 0;
    box-shadow: 0 0.202em 0 0 rgba(232, 227, 227, 0.4);
    -webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 227, 0.4);
    background: #fff;
  }
  #header #navigation ul.nav ul li a {
    border: 0;
    background: #fff;
  }
  #header #navigation ul.nav ul ul {
    left: 100%;
    top: -0.372em;
  }
  h3.nav-toggle {
    display: none;

but I want more option, right now my theme css treats both hover and dorp-down menu style as one css if I want different background color for hover and drop-down and I can’t do that ?? please help me out thanks in advance ??