html - 像 wascc.com.au 这样的 css 垂直下拉菜单

Question

我想创建一个像 active @ http://www.wascc.com.au/ 那样的 CSS 垂直菜单

但是，我正在将此网站转换为 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

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

这是 working code

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

请告诉我它是否适合您？