here is the HTML:
http://codepen.io/anon/pen/epvNRG
<select>
<red>
</select>
.
^ is what i tried to use but it doesnt look as good! thanks
What I need:
A dropdown menu on hover. When cursor is on 'glossary' have a dropdown menu below glossary that can say anything! Thanks! Please make it the same size as the glossary box! Aparrt from that, a little transparancy would be cool too!
Thanks!
My suggestion to you would be to either learn some bootstrap becasue it makes a lot of the css coding and such a whole lot easier, or do a quick google search before asking on the form. Anyways:
html:
<html>
<head>
<meta charset="UTF-8">
<title>Watts</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<ul>
<li class="highlight">Home</li>
<li>References</li>
<li>Glossary</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
background-color: #ccc;
} /* End of body rule */
ul
{
list-style: none;
background-color: #444; /* A very dark shade of grey as a background colour. */
text-align: center;
margin: 0;
padding: 0;
} /* End of ul rule */
li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
} /* End of li rule */
a
{
color: #fff; /* A white colour. */
text-decoration: none;
display: block;
transition: 0.65s;
} /* End of a rule */
a:hover
{
background-color: #005f5f; /* rgb(0, 95, 95) - A colour similar to teal. */
} /* End of a:hover rule */
.highlight a /* Makes the block of the navigation page that you are on white on the navigation bar. */
{
background-color: #fff; /* A white background colour. */
cursor: default;
color: #444
} /* End of .highlight a rule */
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
You can try this pure HTML/CSS Menu:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
nav { width:100%; background:#000; display:inline-block;}
nav ul { margin:0; padding:0;}
nav ul li { margin:0; padding:0; list-style:none; display:inline-block; cursor:default;}
nav ul li a { color:#fff; padding:10px; font:15px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; display:inline-block;}
nav > ul > li { float:left;}
nav ul li:hover > a { color:#fff; background:#005f5f;}
nav ul li a.active { color:#fff; background:#3b4747;}
nav ul ul { width:auto; min-width:200px; display:none; background:#131313; position:absolute; z-index:555; text-align:left;}
nav li:hover > ul { display:block;}
nav ul ul ul { left:100%; top:0;}
nav ul ul li { width:100%; display:block; float:none;}
nav ul ul a { width:100%; padding:8px 15px; display:block; color:#fff; border-bottom:1px solid #111;}
nav ul ul li:hover > a { background:#005f5f; color:#fff;}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a>Services</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Blog</li>
<li><a>Support</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
Related
I am trying to create a dropdown menu with CSS. When I hover on menu item, it doesn't work as expected. It does not show any categories below that item, I don't know why.
I do not want to use JavaScript, I want to use only pure css.
https://jsfiddle.net/3dovsL0g/
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: 50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul li:hover > ul{
display:block;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li><h4>Entertainment</h4></li>
<ul>
<li><h4>Hollywood</h4></li>
<li><h4>Jollywood</h4></li>
<ul>
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
<li><h4>Bollywood</h4></li>
</ul>
<li><h4>Contact</h4></li>
</ul>
</div>
You'll need to place sub-menus inside the hovering elements, so that they are their child elements and then simply use class to target them. Here try this.
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: :50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li class="hasSub"><h4>Entertainment</h4>
<ul class="sub-menu">
<li><h4>Hollywood</h4></li>
<li class="hasSub1"><h4>Jollywood</h4>
<ul class="sub-menu1">
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
</li>
<li><h4>Bollywood</h4></li>
</ul>
</li>
<li><h4>Contact</h4></li>
</ul>
</div>
and the fiddle: https://jsfiddle.net/kpdwf9th/1/
Use this code , and change it menu with dropDown
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
You need to nest your <ul> tags within each <li> element. Semantically, sub items should be children to their parents.
.nav { /* style nav bar */
display: flex;
color: #fff;
list-style: none;
padding: 0;
}
.nav li { /* style ALL li tags */
position: relative;
padding: 12px;
background-color: #333;
}
.nav li > ul { /* hide all ul tags at first */
display: none;
list-style: none;
padding: 0;
position: absolute;
z-index: 1;
}
.nav li:hover > ul { /* show ul tags when parent li is hovering */
display: block;
}
.nav li > ul > li > ul { /* move 3rd layer ul to the right */
left: 100%;
top: 0;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Entertainment
<ul>
<li>Hollywood</li>
<li>Jollywood
<ul>
<li>steve</li>
<li>jobs</li>
<li>john</li>
</ul>
</li>
<li>Bollywood</li>
</ul>
</li>
<li>Contact</li>
</ul>
I'm making a navigation menu.
I got it all working now but when the sub menu pops up all the html is distorting.
All the div's below are going downwards.
Is there somebody who can help me?
Here is the html with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
#body
{
width: 1200px;
}
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
#uldiv
{
width:1200px;
float:left;
}
#secdiv
{
width:1200px;
float:left;
}
</style>
</head>
<body>
<div id="uldiv">
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="secdiv">
here some text whish will not move while the menu is popping up.
</div>
</body>
</html>
You need to add :
ul li:hover ul {
display: block; /* display the dropdown */
position:absolute; /* <--- this line */
}
To take the submenu out of the document flow and doesn't push the below content down.
You also need to add :
ul li ul li{
float:none;
}
So that the sub menu items don't display on the same line and stack below each other.
DEMO
Full code :
#body {
width: 1200px;
}
ul {
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
ul li a {
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
/* display the dropdown */
position:absolute;
}
ul li ul li{
float:none;
}
#uldiv {
width:1200px;
float:left;
}
#secdiv {
width:1200px;
float:left;
}
<div id="uldiv">
<ul>
<li>Home
</li>
<li>About
</li>
<li> Products
<ul>
<li>Laptops
</li>
<li>Monitors
</li>
<li>Printers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>
Give position:absolute to the ul
Fiddle
ul li ul {
position:absolute;
display: none;
}
I'm trying to create a CSS dropdown menu but have run into an issue where some style elements remain and some do not. In my codepen example you'll notice that when you hover over "Competencies" the background changes to a dark blue and the the text to white but when you move to the next list item, the text changes back to the original dark blue color. I'd like for it to remain white. I've tried removing the color attribute from nav ul li a.
nav ul li a {
display: block; padding: 1em 2em;
color: #003c7d; text-decoration: none;
font-size:1.15em;
}
nav ul li a:hover {
color:#fff;
}
http://codepen.io/anon/pen/aDBeK
just add code in css: (please run code in full screen)
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
body {
font-size:14px;
font-family: Arial;
line-height: 1.5;
}
main {
width:100%;
}
header {
margin-bottom:10px;
width:80%;
vertical-align:middle;
/*box-shadow: 0px 5px 3px rgba(0,0,0,0.25);*/
}
select {
margin-top:10px;
font-size:1em;
}
nav ul {
background: background: rgba(255, 255, 255, 0.1);
vertical-align: middle;
padding: 0 0.625em;
/*margin-left:1.25em;*/
list-style: none;
position: relative;
display: inline-table;
}
nav ul ul {
display:none;
}
nav ul ul li {
float:none;
position:relative;
color:#fff;
}
nav ul li:hover > ul {
display:block;
background:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul li a {
display: block; padding: 1em 2em;
color: #003c7d; text-decoration: none;
font-size:1.15em;
}
nav ul li a:hover {
color:#fff;
}
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
nav ul li a:active{
color:#fff;
}
nav ul li:hover {
background: #003c7d;
}
li {
float:left;
vertical-align:middle;
}
<nav>
<ul>
<li>MS-1</li>
<li>MS-2</li>
<li>MS-3</li>
<li>MS-4</li>
<li style="font-weight:bold">Competencies
<ul>
<li>Physician as Healer [A]
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<li>Physician as Scientist [B]
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
<li>Physician as Advocate [C]
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
<li>Physician as Educator [D]
<ul>
<li>D1</li>
<li>D2</li>
<li>D3</li>
</ul>
<li>Physician as Colleague [E]
<ul>
<li>E1</li>
<li>E2</li>
<li>E3</li>
</ul>
<li>Physician as Role Model [F]
<ul>
<li>F1</li>
<li>F2</li>
<li>F3</li>
</ul>
<li>Physician as Life-long Learner [G]
<ul>
<li>G1</li>
<li>G2</li>
<li>G3</li>
</ul>
</ul>
</li>
</ul>
</nav>
Here I have my website: http://gyazo.com/56e069ebf8b5bd61ee30523886180b88
There are a number of issues with the nav bar.
1.You can see that the text or nav bar is not horizontally centered, as indicated by the hover (which is equal on top and bottom)
2.There is to much space in between the text, (and this spacing is the only way I've found works without the text moving around when highlighting or hovering.
So for 1. is there a way I can make the text or the nav bar (not sure what is the cause) centre so the hover looks more equal (horizontally)
For 2. Is there a way I can close the gap between the text, while still keeping the same padding settings, and so it doesn't move the text around when I use the hover function.
I've also added a jsfiddle if that helps: http://jsfiddle.net/d1a5eshs/
HTML FOR NAV BAR
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL
</li>
<li><br>PURE-PVP
</li>
<li><br>GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
<li>CONTACT
</li>
</ul
CSS FOR NAV BAR
/*TOP NAV BAR SECTION*/
#nav_bar {
background-color: #a22b2f;
padding:1px;
box-shadow: 0px 2px
height:45px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
text-decoration:none;
font-weight:bold;
font-size:15px;
margin-left:10px;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
margin-bottom:30px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:13px;
padding-left:10px;
padding-right:10px;
}
#nav_bar>ul>li>ul>li>a:hover {
background:#c9c9c9;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: #e2e2e2;
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:10px;
border: 1px solid black;
border-radius:5px;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
font-size:12px;
font-weight:bol;
margin-left:-20px;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
There were several spacing issues and also there were several duplicate styles and a few mistakes, but I think I fixed all your issues. http://jsfiddle.net/d1a5eshs/1/.
Here's my version of your navigation bar: http://jsfiddle.net/zo541am2/. I trimmed and simplified both your HTML and CSS code.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>STATUS</li>
<li>INFO</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL</li>
<li>PURE-PVP</li>
<li>GAMESWORLD</li>
</ul>
</li>
<li>RULES</li>
<li>VOTE</li>
<li>CONTACT</li>
</ul>
</nav>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
nav {
background-color: #a22b2f;
box-shadow: 0px 2px 10px;
}
ul {
list-style-type: none;
}
nav > ul {
display: table;
margin: 0 auto;
min-width: 650px;
text-align: center;
}
nav > ul > li {
display: inline-block;
position: relative;
}
nav > ul > li > a {
display: block;
color: #fff;
text-decoration: none;
font: bold 15px/3 Serif;
padding: 0 15px;
}
nav ul ul {
display: none;
position: absolute;
min-width: 100%;
background: #e2e2e2;
border: 1px solid gray;
border-radius: 2px;
}
nav > ul > li:hover > a {
background: #8c1b1f;
}
nav ul ul li a {
display: block;
color: black;
font: bold 12px/3 Sans-Serif;
text-decoration: none;
}
nav ul ul > li:hover > a {
background: #c9c9c9;
}
nav > ul > li:hover > ul {
display: block;
}
http://i.stack.imgur.com/OP0kc.jpg
the navigation menu i have created using the CSS and Html code is not working correctly.
The alignment of the navigation menu is not perfect i want in this way : http://i.stack.imgur.com/h4oPK.jpg
I want to convert this to CSS..
Please help
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
Fixed. I think this is what you want http://dabblet.com/gist/2792978
Simply remove position: relative from #nav li and give it to #nav.