» » Simple Css Drop Down Menu


-------------------------------------------------------------------------------------------------------------------------
http://codepen.io/philhoyt/pen/ujHzd
MAKE STILL DROPDOWN REMOVE HOVER WORD
#primary_nav_wrap ul li:hover > ul {
display: block
}

-------------------------------------------------------------------------------------------------------------------------
WITHOUT HOVER WORD CODE
--------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------
USE THIS CSS CODE WITHOUT HOVER WORD CODE
------------------------------------------------------------------------------------------------------------------------
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: red
}
#primary_nav_wrap ul li {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li ul {
display: block
}

-------------------------------------------------------------------------------------------------------------------------
REAL CODE OR HOVER WORD CODE
--------------------------------------------------------------------------------------------------------------------------
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}

--------------------------------------------------------------------------------------------------------------------
HTML PART
-------------------------------------------------------------------------------------------------------------------

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li class="dir"><a href="#">Sub Menu 1</a></li>
<li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

---------------------------------------------------------------------------------------------------------------------
OTHER MENU CODES
http://www.cssterm.com/css-menus/vertical-css-menu/simple-vertical-menu
---------------------------------------------------------------------------------------------------------------------

/* CSSTerm.com Simple CSS menu */
.menu_simple ul {
margin: 0;
padding: 0;
width:185px;
list-style-type: none;
}
.menu_simple ul li a {
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #005555;
display:block;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #5FD367;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
<div class="menu_simple">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>


-------------------------------------------------------------------------------------------



CSS Menu two lines




-------------------------------------------------------------------------------------------




/* CSSTerm.com CSS Horizontal menu with images */
.css_menu_two_line {
width:100%;
overflow:hidden;
}
.two_line_menu {
position: relative;
margin-bottom: 40px;
background:#77f url('img_bg.gif') repeat-x;
}
.two_line_menu a {
display: block;
color: #000;
text-decoration: none;
padding:10px;
}
.two_line_menu li:hover a {
color: #fff;
background: #aaf;
}
.two_line_menu li { display: inline-block; }
.two_line_menu li ul { display: none; }
.two_line_menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
}
.two_line_menu li ul li:hover a { color: #000; }












-----------------------------------------------------------------------------------------




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Menu Two Lines</title>
</head>
<body>
<div class="css_menu_two_line">
<ul class="two_line_menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
<li><a href="#">Submenu 1-4</a></li>
</ul>
</li><li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
</ul>
</li><li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li><li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 4-1</a></li>
<li><a href="#">Submenu 4-2</a></li>
<li><a href="#">Submenu 4-3</a></li>
<li><a href="#">Submenu 4-4</a></li>
</ul>
</li><li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Submenu 5-1</a></li>
<li><a href="#">Submenu 5-2</a></li>
<li><a href="#">Submenu 5-3</a></li>
</ul>
</body>
</html>























--------------------------------------------------------------------------------------------------------------

BASIC CSS COLORS

---------------------------------------------------------------------------------------------------------------










CSS Color NameHEX CodeSample Color BoxSample Word


AliceBlue#F0F8FFAliceBlue


AntiqueWhite#FAEBD7AntiqueWhite


Aqua#00FFFFAqua


Aquamarine#7FFFD4Aquamarine


Azure#F0FFFFAzure


Beige#F5F5DCBeige


Bisque#FFE4C4Bisque


Black#000000Black


BlanchedAlmond#FFEBCDBlanchedAlmond


Blue#0000FFBlue


BlueViolet#8A2BE2BlueViolet


Brown#A52A2ABrown


BurlyWood#DEB887BurlyWood


CadetBlue#5F9EA0CadetBlue


Chartreuse#7FFF00Chartreuse


Chocolate#D2691EChocolate


Coral#FF7F50Coral


CornflowerBlue#6495EDCornflowerBlue


Cornsilk#FFF8DCCornsilk


Crimson#DC143CCrimson


Cyan#00FFFFCyan


DarkBlue#00008BDarkBlue


DarkCyan#008B8BDarkCyan


DarkGoldenRod#B8860BDarkGoldenRod


DarkGray#A9A9A9DarkGray


DarkGreen#006400DarkGreen


DarkKhaki#BDB76BDarkKhaki


DarkMagenta#8B008BDarkMagenta


DarkOliveGreen#556B2FDarkOliveGreen


Darkorange#FF8C00Darkorange


DarkOrchid#9932CCDarkOrchid


DarkRed#8B0000DarkRed


DarkSalmon#E9967ADarkSalmon


DarkSeaGreen#8FBC8FDarkSeaGreen


DarkSlateBlue#483D8BDarkSlateBlue


DarkSlateGray#2F4F4FDarkSlateGray


DarkTurquoise#00CED1DarkTurquoise


DarkViolet#9400D3DarkViolet


DeepPink#FF1493DeepPink


DeepSkyBlue#00BFFFDeepSkyBlue


DimGray#696969DimGray


DodgerBlue#1E90FFDodgerBlue


FireBrick#B22222FireBrick


FloralWhite#FFFAF0FloralWhite


ForestGreen#228B22ForestGreen


Fuchsia#FF00FFFuchsia


Gainsboro#DCDCDCGainsboro


GhostWhite#F8F8FFGhostWhite


Gold#FFD700Gold


GoldenRod#DAA520GoldenRod


Gray#808080Gray


Green#008000Green


GreenYellow#ADFF2FGreenYellow


HoneyDew#F0FFF0HoneyDew


HotPink#FF69B4HotPink


IndianRed#CD5C5CIndianRed


Indigo#4B0082Indigo


Ivory#FFFFF0Ivory


Khaki#F0E68CKhaki


Lavender#E6E6FALavender


LavenderBlush#FFF0F5LavenderBlush


LawnGreen#7CFC00LawnGreen


LemonChiffon#FFFACDLemonChiffon


LightBlue#ADD8E6LightBlue


LightCoral#F08080LightCoral


LightCyan#E0FFFFLightCyan


LightGoldenRodYellow#FAFAD2LightGoldenRodYellow


LightGrey#D3D3D3LightGrey


LightGreen#90EE90LightGreen


LightPink#FFB6C1LightPink


LightSalmon#FFA07ALightSalmon


LightSeaGreen#20B2AALightSeaGreen


LightSkyBlue#87CEFALightSkyBlue


LightSlateGray#778899LightSlateGray


LightSteelBlue#B0C4DELightSteelBlue


LightYellow#FFFFE0LightYellow


Lime#00FF00Lime


LimeGreen#32CD32LimeGreen


Linen#FAF0E6Linen


Magenta#FF00FFMagenta


Maroon#800000Maroon


MediumAquaMarine#66CDAAMediumAquaMarine


MediumBlue#0000CDMediumBlue


MediumOrchid#BA55D3MediumOrchid


MediumPurple#9370D8MediumPurple


MediumSeaGreen#3CB371MediumSeaGreen


MediumSlateBlue#7B68EEMediumSlateBlue


MediumSpringGreen#00FA9AMediumSpringGreen


MediumTurquoise#48D1CCMediumTurquoise


MediumVioletRed#C71585MediumVioletRed


MidnightBlue#191970MidnightBlue


MintCream#F5FFFAMintCream


MistyRose#FFE4E1MistyRose


Moccasin#FFE4B5Moccasin


NavajoWhite#FFDEADNavajoWhite


Navy#000080Navy


OldLace#FDF5E6OldLace


Olive#808000Olive


OliveDrab#6B8E23OliveDrab


Orange#FFA500Orange


OrangeRed#FF4500OrangeRed


Orchid#DA70D6Orchid


PaleGoldenRod#EEE8AAPaleGoldenRod


PaleGreen#98FB98PaleGreen


PaleTurquoise#AFEEEEPaleTurquoise


PaleVioletRed#D87093PaleVioletRed


PapayaWhip#FFEFD5PapayaWhip


PeachPuff#FFDAB9PeachPuff


Peru#CD853FPeru


Pink#FFC0CBPink


Plum#DDA0DDPlum


PowderBlue#B0E0E6PowderBlue


Purple#800080Purple


Red#FF0000Red


RosyBrown#BC8F8FRosyBrown


RoyalBlue#4169E1RoyalBlue


SaddleBrown#8B4513SaddleBrown


Salmon#FA8072Salmon


SandyBrown#F4A460SandyBrown


SeaGreen#2E8B57SeaGreen


SeaShell#FFF5EESeaShell


Sienna#A0522DSienna


Silver#C0C0C0Silver


SkyBlue#87CEEBSkyBlue


SlateBlue#6A5ACDSlateBlue


SlateGray#708090SlateGray


Snow#FFFAFASnow


SpringGreen#00FF7FSpringGreen


SteelBlue#4682B4SteelBlue


Tan#D2B48CTan


Teal#008080Teal


Thistle#D8BFD8Thistle


Tomato#FF6347Tomato


Turquoise#40E0D0Turquoise


Violet#EE82EEViolet


Wheat#F5DEB3Wheat


White#FFFFFFWhite


WhiteSmoke#F5F5F5WhiteSmoke


Yellow#FFFF00Yellow


YellowGreen#9ACD32YellowGreen











































04:44




AYESHA KHAN















































0
comments:
        
















Post a Comment




















        

      







Subscribe to:
Post Comments (Atom)













 


































Blogger TemplateBolton College © 2013. All Rights Reserved. Powered by Blogger


Top