[css] Adding a CSS drop down menu

[gtg93]

Hi,

 

I'm developing a site for someone and am trying to get the menu to expand to a sub-menu on scroll over. I've currently got it working as can be seenhere by scrolling over the gallery link at the top, except I'm wanting it to be horizontal like the main menu above it.

 

Anyone suggest a code for it? The current one I'm using is below if that can be easily modified to do it. I'm still picking up CSS so go easy

 

CSS

HOVER VERTICAL
.navigation ul {
margin:0px;
padding:0px;
}
.navigation li { 
display:inline;
height:30px;
list-style:none;
margin-left:15px;
margin-right:15px;
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
display:inline-block;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
.navigation li:hover ul
{
display:block;
width:160px;
}
.navigation li li {
list-style:none;
display:list-item;
}

 

HTML

</pre><li>HOME

</li><br><br><li>ABOUT
</li><br><br><li>GALLERY
  
WEDDINGS
ARCHITECTURE
ENTERTAINMENT
PORTRAITURE
LANDSCAPES
OTHER
 
</li><br><br><li>CONTACT

</li><br><br><li>PARTNERS



</li> <br><br><br><br><br><b

 

 

 

Cheers!

[mac_shinobi]

Different examples here : Menu Scripts

 

I presume you mean tab menu ? As per the last example

[gtg93]

That's perfect! I'll give it a shot thanks

[gtg93]

Is there anyway the above code I have posted can be easily converted into the tab menu style? Implementing the code in the link you mentioned destroys the styling of the links on the site, and I'm struggling to get it back to how it should look once I've done so

[gtg93]

The CSS code in the original post is also wrong, I've just realised that's redundant code and the code in use is actually:

 

/* Sets menu container to stretch across screen */
#menu_container {
width: 100%;
height: 30px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}

/* Menu layout within menu conainer */
#menu {
width: 1000px;
height: auto;
margin: 0px auto;
text-align: left;
font-size: 16px;
}
#menu ul {
margin: 0px;
padding: 6px 0px;
}
#menu li {
display: inline;
padding: 0px;
margin: 0px 80px 0px 0px;
padding-bottom: 10px;
}
#menu a {
color: #959595;
text-decoration: none;
}
#menu a:hover {
color: #FFF;
padding-bottom: 10px;
border-bottom: 5px solid #FFF;
}

 

Any help and suggestions are appreciated!

[gtg93]

I know I'm just rambling to myself here, but I'e managed to get a step further.

 

The submenu is now showing as horiziontal (wrong HTML tags linking it to the incorrect part of the CSS document), but all the links are grouped together. If you go to the gallery page and hover over gallery, you'll see what I mean. Can anyone help?

 

Thanks

[mikecampbell]

Just knocked up a simplified example which I think illustrates what you're after, which may help you get somewhere with it:

 

Edit this Fiddle - jsFiddle

 

   
       Menu Item 1
       Menu Item 2
       Menu Item 3
           
               Submenu Item 2
               Submenu Item 2
           
       
   

 

.menu ul {
   width: 100%;
   display: block;
}


.menu ul li {
   display: inline;
   list-style-type; none;
}


.menu ul ul {
   display: none;
}


.menu ul li:hover > ul {
   display: block;
}

[gtg93]

Thanks! I'll give that a try

[akashram]

Hi,

 

I'm developing a site for someone and am trying to get the menu to expand to a sub-menu on scroll over. I've currently got it working as can be seenhere by scrolling over the gallery link at the top, except I'm wanting it to be horizontal like the main menu above it.

 

Anyone suggest a code for it? The current one I'm using is below if that can be easily modified to do it. I'm still picking up CSS so go easy

 

CSS

HOVER VERTICAL
.navigation ul {
margin:0px;
padding:0px;
}
.navigation li { 
display:inline;
height:30px;
list-style:none;
margin-left:15px;
margin-right:15px;
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
display:inline-block;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
.navigation li:hover ul
{
display:block;
width:160px;
}
.navigation li li {
list-style:none;
display:list-item;
}

 

HTML

</pre><li>HOME

</li><br><br><li>ABOUT
</li><br><br><li>GALLERY
  
WEDDINGS
ARCHITECTURE
ENTERTAINMENT
PORTRAITURE
LANDSCAPES
OTHER
 
</li><br><br><li>CONTACT

</li><br><br><li>PARTNERS



</li> <br><br><br><br><br><b

 

 

 

Cheers!

 

It's work perfectly. Thanks for sharing the css drop down menu.

[gtg93]

As above, that did the job! Thanks