newcoder1010 Posted January 10, 2017 Share Posted January 10, 2017 (edited) Hello, I have this html: <ul class="menu nav"> <li class="first leaf"> <a href="md1" class="parent-menu">ARLINGTON COUNTY, VA</a></li> <li class="leaf parent-item1"><a href="md2" >AC C2</a></li> <li class="leaf parent-item1"><a href="md3" >AC C1</a></li> <li class="leaf"><a href="md4" >Prince George's County, MD</a></li> <li class="leaf parent-item1"><a href="md5" >PG C2</a></li> <li class="last leaf parent-item1"><a href="md6" >PG C1</a></li> </ul> ---- How to add bullet points before each parent-item1 class as follows: . AC C1 . AC C2 ----- I tried this code and it did not do anything. .parent-item1 {list-style: square;} Edited January 10, 2017 by newcoder1010 Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2017 Share Posted January 10, 2017 Are there any other styles being applied to the element? Use the DOM inspector to see what styles the element has. Link to comment Share on other sites More sharing options...
newcoder1010 Posted January 10, 2017 Author Share Posted January 10, 2017 I did inspect. I did see one element showing as list-style:none; I removed it and it still did not work. Now, I have this instead. Still no luck. .cities-we-serve-menu-block .parent-item1 { margin-left: 15px; display: list-item; } This is my page. If you could inspect please, it would help. Please scroll down and see on the right. Block title: CITIES WE SERVE. Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2017 Share Posted January 10, 2017 You haven't set the list-style-type property. This works: .cities-we-serve-menu-block .parent-item1 { margin-left: 15px; display: list-item; list-style-type: square; } You might have to adjust the margin and padding for the list item. Link to comment Share on other sites More sharing options...
newcoder1010 Posted January 11, 2017 Author Share Posted January 11, 2017 (edited) Thank you. I made some changes. How to indent the inner li classes(.child-menu-item)? I tried list-style-position: inside; and did not work. If I use margin-left, it only indents the text. I would like to indent the bullets as well. .cities-we-serve-menu-block .menu li { display: list-item; list-style-type: square; } .cities-we-serve-menu-block .child-menu-item { margin-left: 55px; list-style-position: inside; } Edited January 11, 2017 by newcoder1010 Link to comment Share on other sites More sharing options...
newcoder1010 Posted January 11, 2017 Author Share Posted January 11, 2017 I made progress but not quite there yet. How can I place all child-menu-items indent with the bullets? Some indented and some did not. https://drive.google.com/file/d/0B7xIEuVi005yNFF6SjdIWC12TTg/view?usp=sharing Link to comment Share on other sites More sharing options...
newcoder1010 Posted January 11, 2017 Author Share Posted January 11, 2017 I fixed it. Thanks. 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