- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4566
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: 4703
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: 4759
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: