- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4080
Example I took from here, but from the css and html I deleted parts which are needed for beautification.
HTML should be simple:
<ul> <li> Menu 1 <ul> <li> Menu 1 SubMenu 1 </li> <li> Menu 1 SubMenu 2 </li> <li> Menu 1 SubMenu 3 </li> </ul> </li> <li> Menu 2 <ul> <li> Menu 2 SubMenu 1 </li> <li> Menu 2 SubMenu 2 </li> </ul> </li> <li>Menu 3</li> </ul>
CSS:
ul { list-style: none; //I dont need bullets padding: 0px; //so that submenus are under main menu correctly aligned } ul li { position: relative; float: left; } li ul { display: none; //sub menus will not be displayed } li:hover ul { display: block; //display submenus when mouse is over position: absolute; }
Real life example
-
Menu 1
- Menu 1 SubMenu 1
- Menu 1 SubMenu 2
- Menu 1 SubMenu 3
-
Menu 2
- Menu 2 SubMenu 1
- Menu 2 SubMenu 2
- Menu 3
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4112
EM - Equal to the computed value of the font-size property of the element on which it is used.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="rootSquare"></div> </body> </html>
CSS:
.rootSquare { border: 1px solid #333; height: 1em; }Live example:
Notice in this my live example that "rootSquare" div is 14px - that is because parent element's font size is 14 pixels, so that means 1em = parent element font size, if font-size is not defined then default font size is taken
REM - same as the EM the only difference is that it will take font size of the root element which is usually HTML
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4265
Here I mentioned "greater than" (or "bigger than") selector, but while I was reading SMACSS I realized that I don't understand some selectors good enough.
So, here are my examples taken from SMACSS.
Same HTML I am going to use, but with different CSS:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="/css/index.css"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="sidebar"> I am a sidebar div <div> and I am inner div <div> and I am third level div </div> </div> </div> </body> </html>
1. With "greater than" selector:
CSS:
#sidebar>div { border: 1px solid #333; }
Looks like this:
2. With space
CSS:
#sidebar div { border: 1px solid #333; }Looks like this: