General Community > HTML/CSS

Add submenu to menu

(1/2) > >>

Balaban:
hi everyone. i have a problem with my menu.

i'm using :


--- Quote ---<nav>
                                <ul>

                                     <li>
                                          <a href="./" title="Home">
                                                <strong>Home</strong>
                                                <span>Lorem ipsum</span>
                                          </a>
                                     </li>
                                     <li>
                                          <a href="./" title="About Us">

                                                <strong>About</strong>
                                                <span>Whe we are</span>
                                          </a>
                                     </li>
                                     <li>
                                          <a href="./" title="Work">
                                                <strong>Work</strong>

                                                <span>What we do</span>
                                          </a>
                                     </li>                                     
                                     <li>
                                          <a href="./" title="Blog">
                                                <strong>Blog</strong>
                                                <span>Lorem ipsum</span>
                                          </a>

                                     </li>
                                     <li>
                                          <a href="./" title="Contact">
                                                <strong>Contact</strong>
                                                <span>Get in touch</span>
                                          </a>
                                     </li>
                                </ul>             
                          </nav>

--- End quote ---

and style:


--- Quote ---#header nav ul {position: absolute;top: 0;right: 0}
#header nav li {float: left; list-style-type: none;}
#header nav li a {float: left;color: #323338;display: block;padding: 20px 20px;text-decoration: none; }
#header nav li a strong {display: block;font-size: 1.1em;margin-bottom: 0;}
#header nav li a span {color: #989898;font-size: 11px}
#header nav li.active a strong, #header nav li.active a span,
#header nav li a:hover strong, #header nav li a:hover span {cursor: pointer;color: #000 !important}
--- End quote ---


and i want to add submenu item to this menu.  but i can't. no matter that's animated or sytlish. i can stylize later. what's the best way?

Spaceman-Spiff:
You can do this in pure CSS using something like this: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

anteprimorac:
HTML:

--- Code: ---<ul>
<li><a href="LINK">MENU#1</a></li>
<li><a href="LINK">MENU#2</a>
<ul class="submenu-1">
<li><a href="LINK">MENU#3</a>
<ul class="submenu-2">
<li><a href="LINK">MENU#4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="LINK">MENU#5</a>
<ul class="submenu-1">
<li><a href="LINK">MENU#6</a></li>
</ul>
</li>

--- End code ---

CSS:


--- Code: ---ul li {
// All menus li
}
ul li ul { // All submenus
margin-top: 10px;
margin-left: 10px;
}
ul li ul li { // All submenus li

}
ul.submenu-1 { // UL > LI > UL

}
ul.submenu-2 { // UL > LI > UL > LI > UL

}
...

--- End code ---

That is an idea :D

epicoder:
Whitespace, my friend! Makes your code easier to read. Your HTML is good on that point, but your CSS could use some more.
As for the dropdown menus, the :hover pseudoclass seems to fit the bill. Here is a sub menu, in this case, added to the blog item:

--- Code: ---<ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
</ul>
--- End code ---

And here is the modified CSS. I removed some unnecessary properties and the !important. You should NEVER use !important unless you're positive there's no other way to get the look you're aiming for. It completely ignores the "cascading" in CSS, which is sorta the whole point.

--- Code: ---#header nav ul {
position: absolute;
top: 0;
right: 0;
}
#header nav li {
float: left;
list-style-type: none;
}
#header nav li a {
color: #323338;
display: block;
padding: 20px;
text-decoration: none;
}
#header nav li a strong {
display: block;
font-size: 1.1em;
margin-bottom: 0;
}
#header nav li a span {
color: #989898;
font-size: 11px;
}
#header nav li a:hover span {
cursor: pointer;
color: #000;
}
#header nav ul ul li a {
padding: 0 0 0 5px;
border-left: 2px solid transparent;

}
#header nav ul ul li { /*submenu item*/
margin: 5px 0;
padding: 0;
display:block;
float:none;
}
#header nav ul ul li:hover a { /*submenu item hover*/
border-left: 2px solid black;
}
#header nav ul ul { /*General submenu style*/
display: none;
list-style-type: none;
float:none;
padding: 5px;
position: relative;
top: -15px;
left: 20px;
}
#header nav ul li:hover ul { /*display submenu on hover */
display:block;
}
--- End code ---

anteprimorac:
Good job, but if you want advanced style you must add some classes on submenus.

Navigation

[0] Message Index

[#] Next page