Jump to content

css navigation with submenu


Go to solution Solved by yandoo,

Recommended Posts

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 :)

Link to comment
https://forums.phpfreaks.com/topic/277501-css-navigation-with-submenu/
Share on other sites

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.