CODEWITHSUNDEEP
csswordpress
Jack Averill
Jack Averill

Reputation: 851

How can I add CSS to grandchild pages in an unordered list on Wordpress?

I've set up Wordpress menus via PHP, so I'm not directly setting up an unordered list with HTML. I've managed to set up a submenu for child pages, which appears when hovering over the main menu items. I'm having difficulty with doing the same for the children of the subpages, or "grandchild pages" in other words.

The css class/ID for my sub menu unordered list is:

nav.main-menu#header ul ul

I would have thought that it followed that the submenu for that would be:

nav.main-menu#header ul ul ul

but this doesn't seem to be working.

My CSS code code for the whole menu is:

nav.main-menu#header ul{
display:block;
padding:0;
margin-top:20px;
margin-bottom:0px;
list-style:none; 
}

nav.main-menu#header ul li {
float:left;
padding: 0px 0px 20px 0px;
margin-left: 45px;
}

nav.main-menu#header ul li a { 
font-family: Open Sans, Helvetica; 
font-size: 12.5px;
letter-spacing: 0.5px;
text-transform: uppercase;
}

nav.main-menu#header ul li:first-child { margin-left:0px; }

nav.main-menu#header ul li.current-menu-item a:visited,
nav.main-menu#header ul li.current-menu-item a:link { color:#A084BD; }

/* CHILD PAGE MENU */

nav.main-menu#header ul ul { 
position:absolute; 
left: -999em; 
}

nav.main-menu#header ul li:hover ul {
border-top-style: solid;
border-top-width: 3px; 
border-top-color: #A084BD;
z-index:10;
left:auto;
width: 180px;
height:auto;
margin:20px 0px 0px 0px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
}

nav.main-menu#header ul li ul li {
padding:0px;
margin-left:0px;
width:100%;
}

nav.main-menu#header ul li ul li a {
display: block;
padding: 20px 0px 20px 10px;
background-color:#ffffff;
transition: 800ms padding-left, .2s background-color, .2s color;

font-size:11.5px;
letter-spacing: 0.5px;
line-height: 0px;
color: #b8b8b8;
text-transform: uppercase;
}

nav.main-menu#header ul li ul li a:hover { 
padding-left: 15px; 
background-color:#ededed;
color: #9a9a9a;
}

My PHP function is:

function register_menus() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'theme_wp' ),    
            'header' => __( 'Header Menu' ),
            'footer' => __( 'Footer Menu' )
        )
    );
}
add_action( 'init', 'register_menus' );

My header is:

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                        <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                    </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

Upvotes: 0

Views: 198

Answers (1)

Ceili
Ceili

Reputation: 1308

You will need to appropriately nest your ul and li elements -- like so:

nav.main-menu#header ul li ul li ul

Because, in fact, the ul element isn't inside another ul element, it is inside the li.

Upvotes: 1

Related Questions