yandoo Posted May 1, 2013 Share Posted May 1, 2013 Hiya i'm using a navigation menu with a submenu on just one item for my website and I want to customise it to simply add a | character (as a neat divider) after each menu item. I cant work out how to do it because every time i try to add it in it pushes the rest of menu items to the line below. html <ul id="navbar"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Connections</a></li> <li><a href="#">Windowsill Apothecary</a></li> <li><a href="#">Wizards Ramblings</a></li> <li><a href="#">Vibrational Essences Range</a><ul> <li><a href="#">Furry Friends Essences</a></li><li> <a href="#">Good Vibrations Essences</a></li><li> <a href="#">Release Essences</a></li></ul> </li> <li><a href="#">Herbal Tinctures</a></li> </ul> css #navbar { margin-left: 1em; padding: 0; height: 2em; margin-bottom:0.3em;} #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding: 3px 8px; background-color: #646F5E; color: #fff; text-decoration: none; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px;} #navbar li ul { display: none; width: 13em; /* Width to help Opera out */ background-color: #646F5E; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px;} #navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; } #navbar li:hover { TEXT-DECORATION: underline;} #navbar li:hover li, #navbar li.hover li { float: none; } #navbar li:hover li a, #navbar li.hover li a { background-color: #646F5E; border-bottom: 1px solid #fff; color: #ffffff; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px;} #navbar li li a:hover { background-color: #646F5E; TEXT-DECORATION: underline;} Any ideas? Thank you kindly Quote Link to comment https://forums.phpfreaks.com/topic/277501-css-navigation-with-submenu/ Share on other sites More sharing options...
InoBB Posted May 1, 2013 Share Posted May 1, 2013 I think that your problem is the display: block; here: #navbar li a { display: block; padding: 3px 8px; background-color: #646F5E; color: #fff; text-decoration: none; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px;} but removing this causes other issues as well you'll have to sort out. Quote Link to comment https://forums.phpfreaks.com/topic/277501-css-navigation-with-submenu/#findComment-1427565 Share on other sites More sharing options...
Solution yandoo Posted May 1, 2013 Author Solution Share Posted May 1, 2013 Thank you, I see now Quote Link to comment https://forums.phpfreaks.com/topic/277501-css-navigation-with-submenu/#findComment-1427574 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.