Descendant Selectors

IThinkMyBrainHurts · April 6, 2015

Hi,

I've found a menu I like and works responsively. However the CSS is written so that it affects all lists. I've tried various ways i'd expect to combine it to only work within the nav element. Here's the code (with the menu html again so as to test scope):

<!DOCTYPE html>

<html lang="en"><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta charset="UTF-8">

    <title>CSS Only Navigation Menu</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--<link rel="stylesheet" href="CSS%20Only%20Navigation%20Menu_files/style.css">-->

    

<style>

/*Strip the ul of padding and list styling*/

ul {

    list-style-type:none;

    margin:0;

    padding:0;

    position: absolute;

}



/*Create a horizontal list with spacing*/

li {

    display:inline-block;

    float: left;

    margin-right: 1px;

}



/*Style for menu links*/

li a {

    display:block;

    min-width:140px;

    height: 40px;

    text-align: left;

    line-height: 40px;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    color: #fff;

    background: #2f3036;

    text-decoration: none;

    

    text-indent:10px;

}



/*Hover state for top level links*/

li:hover a {

    background: #19c589;

}



/*Style for dropdown links*/

li:hover ul a {

    background: #f3f3f3;

    color: #2f3036;

    height: 40px;

    line-height: 40px;

}



/*Hover state for dropdown links*/

li:hover ul a:hover {

    background: #19c589;

    color: #fff;

}



/*Hide dropdown links until they are needed*/

li ul {

    display: none;

}



/*Make dropdown links vertical*/

li ul li {

    display: block;

    float: none;

}



/*Prevent text wrapping*/

li ul li a {

    width: auto;

    min-width: 100px;

    /*padding: 0 20px;*/

    padding-right:20px;

    padding-left:10px;

}



/*Display the dropdown on hover*/

ul li a:hover + .hidden, .hidden:hover {

    display: block;

}



/*Style 'show menu' label button and hide it by default*/

.show-menu {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    text-decoration: none;

    color: #fff;

    background: #19c589;

    text-align: left;

    padding: 10px 0;

    display: none;

}



/*Hide checkbox*/

input[type=checkbox]{

    display: none;

    -webkit-appearance: none;

}



/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu{

    display: block;

}





/*Responsive Styles*/



@media screen and (max-width : 760px){

    /*Make dropdown links appear inline*/

    #menu ul {

        position: static;

        display: none;

    }

    /*Create vertical spacing*/

    #menu li {

        margin-bottom: 1px;

    }

    /*Make all menu links full width*/

    #menu ul li, #menu li a {

        width: 100%;

    }

    

    /*Display 'show menu' link*/

    #menu .show-menu {

        display:block;

        /*padding-left:10px;*/

        text-indent:10px;

    }

    

    #menu .show-menu:hover{

        cursor: pointer; cursor: hand;

    }

    

}

</style>



</head>

<body>



<nav class="nav_main">

    <ul>

        <li><a href="#">Home</a></li>

        <li>

            <a href="#">About</a>

            <ul class="hidden">

                <li><a href="#">Who We Are</a></li>

                <li><a href="#">What We Do</a></li>

            </ul>

        </li>

        <li>

            <a href="#">Portfolio</a>

            <ul class="hidden">

                <li><a href="#">Photography</a></li>

                <li><a href="#">Web & User Interface Design</a></li>

                <li><a href="#">Illustration</a></li>

            </ul>

        </li>

        <li><a href="#">News</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

<nav>



<br /><br /><br /><br /><br /><br /><br /><br />

<ul>

        <li><a href="#">Home</a></li>

        <li>

            <a href="#">About</a>

            <ul class="hidden">

                <li><a href="#">Who We Are</a></li>

                <li><a href="#">What We Do</a></li>

            </ul>

        </li>

        <li>

            <a href="#">Portfolio</a>

            <ul class="hidden">

                <li><a href="#">Photography</a></li>

                <li><a href="#">Web & User Interface Design</a></li>

                <li><a href="#">Illustration</a></li>

            </ul>

        </li>

        <li><a href="#">News</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

<br />



<br /><br />

<a href="index.html">INDEX</a><br />

<br />

<br />

</body>

</html>

How do I make the CSS specifically for the main nav menu?

Thanks

Psycho · April 6, 2015

1. First, fix the closing NAV tag - it is currently an open tag

<nav>

Change to a closing tag

</nav>

2. Put ".nav_main " at the beginning of all style elements that apply to the navigation controls. E.g.

.nav_main ul {

IThinkMyBrainHurts · April 6, 2015

Many thanks, I really don't know what I was doing, could swear I did that...???

Sign In

Descendant Selectors

Recommended Posts

IThinkMyBrainHurts

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

IThinkMyBrainHurts

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information