Question

我想创建一个CSS垂直菜单，例如活跃的@ http://www.wascc.com.au/

但是，我将此网站转换为Wordpress，因此生成菜单的HTML与原始版本不同。

新的Wordpress网站是@ http://test.doig.com.au/wascc/

这是新的Wordpress HTML菜单：

    ul#menu-primary-menu li {
        font: 16px/51px oswaldregular;
        color: #48391f;
        background: url(/images/navi-shap.jpg) 0 0 no-repeat;
        float: left;
        text-transform: uppercase;
    }
    ul#menu-primary-menu li a {
        text-decoration: none;
        color: #48391f;
        display: block;
        padding: 0 25px;
    }
    .sub-menu li a {
        background: url(/images/dropdown_arrow_white.png) no-repeat center left;
        display: block;
        min-width: 110px;
        color: black;
        text-decoration: none;
        padding: 0px 9px;
        color: #FFFFFF;
        font: 12px/30px oswaldregular;
    }
    .sub-menu, .sub-menu ul {
        border-top: 3px solid #fcbb38;
        border-radius: 0 0 2px 2px;
        -moz-border-radius: 0 0 2px 2px;
        -webkit-border-radius: 0 0 2px 2px;
        -khtml-border-radius: 0 0 2px 2px;
        -o-border-radius: 0 0 2px 2px;
        -ms-border-radius: 0 0 2px 2px;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 2px;
        top: 0;
        list-style-type: none;
        background: #333333;
        visibility: hidden;
        display: none;
    }

   <ul id="menu-primary-menu" class="menu"><li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-67"><a href="http://test.doig.com.au/wascc/">Home</a></li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://test.doig.com.au/wascc/about-us/">About Us</a>
    <ul class="sub-menu">
    	<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://test.doig.com.au/wascc/about-us/contact-us/">Contact Us</a></li>
    	<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://test.doig.com.au/wascc/about-us/committee/">Committee</a></li>
    	<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://test.doig.com.au/wascc/about-us/constitution/">Constitution</a></li>
    	<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://test.doig.com.au/wascc/about-us/life-members/">Life Members</a></li>
    </ul>
    </li>
    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-79"><a href="http://test.doig.com.au/wascc/calendar/">Calendar</a>
    <ul class="sub-menu">
    	<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-100 current_page_item menu-item-102"><a href="http://test.doig.com.au/wascc/calendar/race-calendar-2016/">Race Calendar 2016</a></li>
    </ul>
    </li>
    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="http://test.doig.com.au/wascc/competition/">Competition</a>
    <ul class="sub-menu">
    	<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://test.doig.com.au/wascc/competition/categories/">Categories</a></li>
    	<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://test.doig.com.au/wascc/competition/standing-regs/">Standing Regs</a></li>
    	<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://test.doig.com.au/wascc/competition/licenses/">Licenses</a></li>
    	<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://test.doig.com.au/wascc/competition/results/">Results</a></li>
    	<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://test.doig.com.au/wascc/competition/entries/">Entries</a></li>
    </ul>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-87"><a href="http://test.doig.com.au/wascc/membership/">Membership</a>
    <ul class="sub-menu">
    	<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://test.doig.com.au/wascc/membership/sign-up-for-membership/">Sign up for Membership</a></li>
    	<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://test.doig.com.au/wascc/membership/gift-cards/">Gift Cards</a></li>
    </ul>
    </li>
    <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-90"><a href="http://test.doig.com.au/wascc/officials/">Officials</a>
    <ul class="sub-menu">
    	<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://test.doig.com.au/wascc/officials/accreditations/">Accreditations</a></li>
    	<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://test.doig.com.au/wascc/officials/affiliations/">Affiliations</a></li>
    	<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://test.doig.com.au/wascc/officials/disciplines/">Disciplines</a></li>
    </ul>
    </li>
    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-95"><a href="http://test.doig.com.au/wascc/v8-supercars/">V8 Supercars</a>
    <ul class="sub-menu">
    	<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://test.doig.com.au/wascc/v8-supercars/overview/">Overview</a></li>
    	<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://test.doig.com.au/wascc/v8-supercars/travel-information/">Travel Information</a></li>
    	<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://test.doig.com.au/wascc/v8-supercars/circuit-map/">Circuit Map</a></li>
    	<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://test.doig.com.au/wascc/v8-supercars/tickets-corporate/">Tickets &amp; Corporate</a></li>
    </ul>
    </li>
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-73"><a href="http://test.doig.com.au/wascc/activities/">Activities</a>
    <ul class="sub-menu">
    	<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="http://test.doig.com.au/wascc/activities/bike-days/">Bike Days</a></li>
    	<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://test.doig.com.au/wascc/activities/corporate-venue-hire/">Corporate Venue Hire</a></li>
    	<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://test.doig.com.au/wascc/activities/drive-days/">Drive Days</a></li>
    	<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://test.doig.com.au/wascc/activities/karts/">Karts</a></li>
    	<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://test.doig.com.au/wascc/activities/your-car-our-track/">Your Car Our Track</a></li>
    </ul>
    </li>
    </ul>

但是需要添加，以完成下拉行为。

协助表示赞赏。

史蒂夫。

Answer 1

在position:relative和ul#menu-primary-menu li中的display:block提及ul#menu-primary-menu li:hover ul

以下是 working code

您需要调整其他风格，例如http://www.wascc.com.au/

请让我知道它对你有用吗？

Answer 2

这里更新了css和html试试它可以帮到你

＆＃13;

ul#menu-primary-menu > li {
        font-family:Oswald;
        font: 14px/51px Oswald;
        font-style: normal;
        color: #48391f;
        background:linear-gradient(to bottom, #FE8 0%, #fcbb38 100%);
        float: left;
        text-transform: uppercase;
        position:relative;
        list-style-type : none;
        border-right : #ddd solid 1px;
    }
 ul#menu-primary-menu > li:last-child{
  border-right : none;
  }
    ul#menu-primary-menu > li > a {
        text-decoration: none;
        color: #48391f;
        display: block;
        padding: 0 20px;
        margin: -10px 0 -10px 0;
    }


.sub-menu li a {
        background: url(/images/dropdown_arrow_white.png) no-repeat center left;
        display: block;
        min-width: 110px;
        color: black;
        text-decoration: none;
        padding: 0px 9px;
        color: #FFFFFF;
        font: 12px/30px Oswald;
    }
    .sub-menu, .sub-menu ul {
        border-top: 3px solid #fcbb38;
        border-radius: 0 0 2px 2px;
        -moz-border-radius: 0 0 2px 2px;
        -webkit-border-radius: 0 0 2px 2px;
        -khtml-border-radius: 0 0 2px 2px;
        -o-border-radius: 0 0 2px 2px;
        -ms-border-radius: 0 0 2px 2px;
        margin: 0;
        margin-top: -7px;
        padding: 0;
        position: absolute;
        left: 2px;
        top: 38px;
        list-style-type: none;
        background: #333333;
        display: none;
        z-index:999;
    }

    .sub-menu li{
    border-bottom : 2px solid #0063a8;
    }

    .sub-menu li:last-child{
    border-bottom : none;
    }

    ul#menu-primary-menu .sub-menu li a{
      color:#fff;
      text-align : center;
    }
    #menu-primary-menu li .sub-menu li::before {
      content : "\203A";
      position : absolute;
      color : white;
      margin : -11px 0 0 10px;
     }
    ul#menu-primary-menu li:hover .sub-menu{
      display:block;
    }
    
#menu-primary-menu li .sub-menu li:hover {
 background : #fcbb38;
 color : #000;
}
Find below updated code which may help you

＆＃13;

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald" />
<ul id="menu-primary-menu" class="menu"><li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-67"><a href="http://test.doig.com.au/wascc/">Home</a></li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://test.doig.com.au/wascc/about-us/">About Us</a>
    <ul class="sub-menu">
        <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://test.doig.com.au/wascc/about-us/contact-us/">Contact Us</a></li>
        <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://test.doig.com.au/wascc/about-us/committee/">Committee</a></li>
        <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://test.doig.com.au/wascc/about-us/constitution/">Constitution</a></li>
        <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://test.doig.com.au/wascc/about-us/life-members/">Life Members</a></li>
    </ul>
    </li>
    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-79"><a href="http://test.doig.com.au/wascc/calendar/">Calendar</a>
    <ul class="sub-menu">
        <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-100 current_page_item menu-item-102"><a href="http://test.doig.com.au/wascc/calendar/race-calendar-2016/">Race Calendar 2016</a></li>
    </ul>
    </li>
    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="http://test.doig.com.au/wascc/competition/">Competition</a>
    <ul class="sub-menu">
        <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://test.doig.com.au/wascc/competition/categories/">Categories</a></li>
        <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://test.doig.com.au/wascc/competition/standing-regs/">Standing Regs</a></li>
        <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://test.doig.com.au/wascc/competition/licenses/">Licenses</a></li>
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://test.doig.com.au/wascc/competition/results/">Results</a></li>
        <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://test.doig.com.au/wascc/competition/entries/">Entries</a></li>
    </ul>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-87"><a href="http://test.doig.com.au/wascc/membership/">Membership</a>
    <ul class="sub-menu">
        <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://test.doig.com.au/wascc/membership/sign-up-for-membership/">Sign up for Membership</a></li>
        <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://test.doig.com.au/wascc/membership/gift-cards/">Gift Cards</a></li>
    </ul>
    </li>
    <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-90"><a href="http://test.doig.com.au/wascc/officials/">Officials</a>
    <ul class="sub-menu">
        <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://test.doig.com.au/wascc/officials/accreditations/">Accreditations</a></li>
        <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://test.doig.com.au/wascc/officials/affiliations/">Affiliations</a></li>
        <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://test.doig.com.au/wascc/officials/disciplines/">Disciplines</a></li>
    </ul>

＆＃13;

Answer 3

试试这个。它可能对你有帮助

＆＃13;

#navigation {
  background: url(http://www.wascc.com.au/Content/themes/base/images/navigation-bg.jpg) 0 0 repeat-x transparent;
  height: 51px;
  width: 1115px;
}
ul#menu-primary-menu li {
  font: 16px/51px oswaldregular;
  color: #48391f;
  background: url(http://www.wascc.com.au/Content/themes/base/images/navi-shap.jpg) 0 0 no-repeat;
  float: left;
  text-transform: uppercase;
  list-style: none;
}
ul#menu-primary-menu li a {
  text-decoration: none;
  color: #48391f;
  display: block;
  padding: 0 25px;
}
.sub-menu li a {
  background: url(/images/dropdown_arrow_white.png) no-repeat center left;
  display: block;
  min-width: 110px;
  color: black;
  text-decoration: none;
  padding: 0px 9px;
  color: #FFFFFF;
  font: 12px/30px oswaldregular;
}
.sub-menu, .sub-menu ul {
  border-top: 3px solid #fcbb38;
  border-radius: 0 0 2px 2px;
  -moz-border-radius: 0 0 2px 2px;
  -webkit-border-radius: 0 0 2px 2px;
  -khtml-border-radius: 0 0 2px 2px;
  -o-border-radius: 0 0 2px 2px;
  -ms-border-radius: 0 0 2px 2px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 2px;
  top: 0;
  list-style-type: none;
  background: #333333;
  visibility: hidden;
  display: none;
}
.menu{
  margin:0;
  padding:0;
}

＆＃13;

<div id="navigation">
  <ul id="menu-primary-menu" class="menu"><li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-67"><a href="http://test.doig.com.au/wascc/">Home</a></li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://test.doig.com.au/wascc/about-us/">About Us</a>
      <ul class="sub-menu">
        <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://test.doig.com.au/wascc/about-us/contact-us/">Contact Us</a></li>
        <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://test.doig.com.au/wascc/about-us/committee/">Committee</a></li>
        <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://test.doig.com.au/wascc/about-us/constitution/">Constitution</a></li>
        <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://test.doig.com.au/wascc/about-us/life-members/">Life Members</a></li>
      </ul>
    </li>
    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-79"><a href="http://test.doig.com.au/wascc/calendar/">Calendar</a>
      <ul class="sub-menu">
        <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-100 current_page_item menu-item-102"><a href="http://test.doig.com.au/wascc/calendar/race-calendar-2016/">Race Calendar 2016</a></li>
      </ul>
    </li>
    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="http://test.doig.com.au/wascc/competition/">Competition</a>
      <ul class="sub-menu">
        <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://test.doig.com.au/wascc/competition/categories/">Categories</a></li>
        <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://test.doig.com.au/wascc/competition/standing-regs/">Standing Regs</a></li>
        <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://test.doig.com.au/wascc/competition/licenses/">Licenses</a></li>
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://test.doig.com.au/wascc/competition/results/">Results</a></li>
        <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://test.doig.com.au/wascc/competition/entries/">Entries</a></li>
      </ul>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-87"><a href="http://test.doig.com.au/wascc/membership/">Membership</a>
      <ul class="sub-menu">
        <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://test.doig.com.au/wascc/membership/sign-up-for-membership/">Sign up for Membership</a></li>
        <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://test.doig.com.au/wascc/membership/gift-cards/">Gift Cards</a></li>
      </ul>
    </li>
    <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-90"><a href="http://test.doig.com.au/wascc/officials/">Officials</a>
      <ul class="sub-menu">
        <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://test.doig.com.au/wascc/officials/accreditations/">Accreditations</a></li>
        <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://test.doig.com.au/wascc/officials/affiliations/">Affiliations</a></li>
        <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://test.doig.com.au/wascc/officials/disciplines/">Disciplines</a></li>
      </ul>
    </li>
    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-95"><a href="http://test.doig.com.au/wascc/v8-supercars/">V8 Supercars</a>
      <ul class="sub-menu">
        <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://test.doig.com.au/wascc/v8-supercars/overview/">Overview</a></li>
        <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://test.doig.com.au/wascc/v8-supercars/travel-information/">Travel Information</a></li>
        <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://test.doig.com.au/wascc/v8-supercars/circuit-map/">Circuit Map</a></li>
        <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://test.doig.com.au/wascc/v8-supercars/tickets-corporate/">Tickets &amp; Corporate</a></li>
      </ul>
    </li>
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-73"><a href="http://test.doig.com.au/wascc/activities/">Activities</a>
      <ul class="sub-menu">
        <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="http://test.doig.com.au/wascc/activities/bike-days/">Bike Days</a></li>
        <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://test.doig.com.au/wascc/activities/corporate-venue-hire/">Corporate Venue Hire</a></li>
        <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://test.doig.com.au/wascc/activities/drive-days/">Drive Days</a></li>
        <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://test.doig.com.au/wascc/activities/karts/">Karts</a></li>
        <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://test.doig.com.au/wascc/activities/your-car-our-track/">Your Car Our Track</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 4

＆＃13;

ul#menu-primary-menu > li {
        font-family:Oswald;
        font: 14px/51px Oswald;
        font-style: normal;
        color: #48391f;
        background:linear-gradient(to bottom, #FE8 0%, #fcbb38 100%);
        float: left;
        text-transform: uppercase;
        position:relative;
        list-style-type : none;
        border-right : #ddd solid 1px;
    }
 ul#menu-primary-menu > li:last-child{
  border-right : none;
  }
    ul#menu-primary-menu > li > a {
        text-decoration: none;
        color: #48391f;
        display: block;
        padding: 0 20px;
        margin: -10px 0 -10px 0;
    }


.sub-menu li a {
        background: url(/images/dropdown_arrow_white.png) no-repeat center left;
        display: block;
        min-width: 110px;
        color: black;
        text-decoration: none;
        padding: 0px 9px;
        color: #FFFFFF;
        font: 12px/30px Oswald;
    }
    .sub-menu, .sub-menu ul {
        border-top: 3px solid #fcbb38;
        border-radius: 0 0 2px 2px;
        -moz-border-radius: 0 0 2px 2px;
        -webkit-border-radius: 0 0 2px 2px;
        -khtml-border-radius: 0 0 2px 2px;
        -o-border-radius: 0 0 2px 2px;
        -ms-border-radius: 0 0 2px 2px;
        margin: 0;
        margin-top: -7px;
        padding: 0;
        position: absolute;
        left: 2px;
        top: 38px;
        list-style-type: none;
        background: #333333;
        display: none;
        z-index:999;
    }

    .sub-menu li{
    border-bottom : 2px solid #0063a8;
    }

    .sub-menu li:last-child{
    border-bottom : none;
    }

    ul#menu-primary-menu .sub-menu li a{
      color:#fff;
      text-align : center;
    }
    #menu-primary-menu li .sub-menu li::before {
      content : "\203A";
      position : absolute;
      color : white;
      margin : -11px 0 0 10px;
     }
    ul#menu-primary-menu li:hover .sub-menu{
      display:block;
    }
    
#menu-primary-menu li .sub-menu li:hover {
 background : #fcbb38;
 color : #000;
}
Find below updated code which may help you

＆＃13;

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald" />
<ul id="menu-primary-menu" class="menu"><li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-67"><a href="http://test.doig.com.au/wascc/">Home</a></li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://test.doig.com.au/wascc/about-us/">About Us</a>
    <ul class="sub-menu">
        <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://test.doig.com.au/wascc/about-us/contact-us/">Contact Us</a></li>
        <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://test.doig.com.au/wascc/about-us/committee/">Committee</a></li>
        <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://test.doig.com.au/wascc/about-us/constitution/">Constitution</a></li>
        <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://test.doig.com.au/wascc/about-us/life-members/">Life Members</a></li>
    </ul>
    </li>
    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-79"><a href="http://test.doig.com.au/wascc/calendar/">Calendar</a>
    <ul class="sub-menu">
        <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-100 current_page_item menu-item-102"><a href="http://test.doig.com.au/wascc/calendar/race-calendar-2016/">Race Calendar 2016</a></li>
    </ul>
    </li>
    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="http://test.doig.com.au/wascc/competition/">Competition</a>
    <ul class="sub-menu">
        <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://test.doig.com.au/wascc/competition/categories/">Categories</a></li>
        <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://test.doig.com.au/wascc/competition/standing-regs/">Standing Regs</a></li>
        <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://test.doig.com.au/wascc/competition/licenses/">Licenses</a></li>
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://test.doig.com.au/wascc/competition/results/">Results</a></li>
        <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://test.doig.com.au/wascc/competition/entries/">Entries</a></li>
    </ul>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-87"><a href="http://test.doig.com.au/wascc/membership/">Membership</a>
    <ul class="sub-menu">
        <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://test.doig.com.au/wascc/membership/sign-up-for-membership/">Sign up for Membership</a></li>
        <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://test.doig.com.au/wascc/membership/gift-cards/">Gift Cards</a></li>
    </ul>
    </li>
    <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-90"><a href="http://test.doig.com.au/wascc/officials/">Officials</a>
    <ul class="sub-menu">
        <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://test.doig.com.au/wascc/officials/accreditations/">Accreditations</a></li>
        <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://test.doig.com.au/wascc/officials/affiliations/">Affiliations</a></li>
        <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://test.doig.com.au/wascc/officials/disciplines/">Disciplines</a></li>
    </ul>

＆＃13;

css垂直下拉菜单，如wascc.com.au

4 个答案: