elementalgrace Posted February 16, 2007 Share Posted February 16, 2007 Hi GuysI'm looking to create some left navigation for a site I'm working on that includes subnavigation, which I'm using nested lists to achieve. The thing is, I want the main naivation to have list-style-type:none; which works fine, but I want to the subnavigation to use a list-style-image. However the list-style-type seems to be carrying over into the subnavigation for some reason. If anyone could offer an idea of what I'm doing wrong or has any suggestions, I'd be happy to hear them. Code is below: /*LEFT NAVIGATION*/#left{ width: 15%; float: left; text-align: left; margin-left:10px;}ul#nav{ margin: 8px 0 32px 0; padding: 0; list-style-type: none;}ul#nav li{ padding-left:1px; border-top: 1px solid #000066; vertical-align: middle; font: bold 85% arial,sans-serif;}ul#nav li a{ line-height: 150%; color: #828282; text-decoration: none; display: block; padding: 0 5px 0 0; margin: 1px 0;}ul#nav li a:hover, ul#nav li a.on{ line-height: 150%; background-color: #9f9f9f; color: #fff !important;}/*SUB NAVIGATION*/ul#nav li dl{ margin: 0; padding: 0; }ul#nav li dl dd{ margin: 6px 0 6px 15px; font: 85% arial, sans-serif; line-height:100%;list-style-image: url(images/bullet.gif) !important;}ul#nav li dl dd a{ font-weight: normal; display: inline; padding: 0; }ul#nav li dl dd a:hover, ul#nav li dl dd a.on{ background-color: #fff; color: #000 !important; text-decoration: underline; <!--LEFT NAVIGATION--> <div id="left"> <ul id="nav"> <li><a href="#" title="Home">Home</a> </li> <li><a href="#" title="">About Us</a> </li> <li><a class="on" href="#" title="">Services</a> <dl> <dd><a href="#" title="">Health & Safety</a></dd> <dd><a href="#" title="">Environment</a></dd> <dd><a href="#" title="">Quality</a></dd> <dd><a href="#" title="">Video</a></dd> <dd><a href="#" title="">DSGAs</a></dd> </dl> </li> <li><a href="#" title="">Frequent Questions</a> </li> <li><a href="#" title="">Links</a> </li> <li><a href="#" title="">Contact Us</a> </li> <li> </li> </ul></div> CheersEG Link to comment Share on other sites More sharing options...
S@m Posted February 16, 2007 Share Posted February 16, 2007 Hmmm, well...I have done it this way in the past and has worked well. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#nav {border:1px solid #ccc;}#nav ul {list-style-type:none;}#nav ul li {padding:3px 0 0 0;}#nav ul li ul li {background:url(pdf-icon.gif) left no-repeat;padding-left:20px;margin-left:-30px;}</style></head><body><div id="nav"> <ul> <li><a href="" rel="next" title="Something">Something</a></li> <li><a href="" rel="next" title="Something">Something</a></li> <li><a href="" rel="next" title="Something">Something</a> <ul> <li><a href="" rel="next" title="Something">Something</a></li> <li><a href="" rel="next" title="Something">Something</a></li> </ul></li> <li><a href="" rel="next" title="Something">Something</a></li></ul></div></body></html> You will need to change the image and path of course, but this should help get you started. I just used a background image for the nested list. The negative margin is to pull it back inside the list. You can remove it, and the list will just pop out like standard display.Hope this helps! Link to comment Share on other sites More sharing options...
elementalgrace Posted February 19, 2007 Author Share Posted February 19, 2007 Thanks. I ended up doing something quite similar and it's finally working now exactly the way I'd hoped so I'm really pleased.Cheers! 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