IThinkMyBrainHurts Posted April 6, 2015 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/295338-descendant-selectors/ Share on other sites More sharing options...
Solution Psycho Posted April 6, 2015 Solution Share Posted 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 { Quote Link to comment https://forums.phpfreaks.com/topic/295338-descendant-selectors/#findComment-1508441 Share on other sites More sharing options...
IThinkMyBrainHurts Posted April 6, 2015 Author Share Posted April 6, 2015 Many thanks, I really don't know what I was doing, could swear I did that...??? Quote Link to comment https://forums.phpfreaks.com/topic/295338-descendant-selectors/#findComment-1508445 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.