DarkxPunk Posted December 23, 2012 Share Posted December 23, 2012 Hey everyone, So I am playing around with navigation bars with menus and noticed for some reason one ID is overruling the CLASS and I have been playing with it and can't seem to wrap my head around it. I have: <style>#nav li {float: left;}.sub li {float: none;}</style> <ul id="nav"><li>Stuff</li><ul class="sub"><li>StuffSub</li></ul></ul> Now for some reason no matter what I do the sub is being overruled and the li in the .sub is floating left. Now as far as I know the browser should render my css line by line and if the .sub is after the #nav than the .sub gets overruling powers... But its not. Why? Thanks for any help... This is all of the code if you wanna see. <!doctype html><html><head><title>NavBar</title><style>ul {margin: 0;border: 0;padding: 0;list-style: none;overflow: hidden;}#nav li {float: left;padding-left: 10px;}ul ul {position: absolute;top: 30px;}.sub li {float: none;}</style></head><body><ul id="nav"><li>Home</li><li>About</li><ul class="sub" id="aboutSub"><li>Myself</li><li>Our Company</li><li>Our Partners</li></ul><li>Projects</li><ul class="sub" id="projectsSub"><li>Future</li><li>Present</li><li>Past</li></ul><li>Contact</li><ul class="sub" id="contactSub"><li>Form</li><li>Email</li><li>Forum</li></ul></ul></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted December 23, 2012 Share Posted December 23, 2012 IDs have the highest precedence of any rule. A rule with an ID will always override a rule without one. Link to comment Share on other sites More sharing options...
davej Posted December 23, 2012 Share Posted December 23, 2012 The specificity calculation panel is one of the more useful features in Dreamweaver. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 23, 2012 Author Share Posted December 23, 2012 So what you think of this solution, add a class to the nav, and make the rule associated with the class? Link to comment Share on other sites More sharing options...
thescientist Posted December 25, 2012 Share Posted December 25, 2012 maybe #nav li .sub li{} ? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now