I would like to have a dropdown sub- menu in the same style, I know it's simple but I'm still new to making websites and I can't figure it out by myself.
here's the top part of my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Startpagina</title>
<LINK href="../CSS/stylesheet.css" rel=stylesheet>
</head>
<body>
<div class="schikking">
<img src="../Images/bibram.png" alt="Logo van de bib" height="90" width="170">
<!-- navigatie -->
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
</nav>
and a big part of my CSS file:
.schikking {
margin: 0 auto;
padding: 30px 0px 0px 0px;
max-width: 1010px;
}
.content {
background-color: red;
background-color: rgba(147, 4, 0, 0.84);
border: 1px solid black;
}
nav li
{
display: inline;
padding-right: 8px;
}
nav {
text-align: center;
margin: -20px 0px 0px 0px;
}
nav ul{
background-color: rgba(126, 4, 0, 0.79);
border: 1px solid black;
}
nav ul li{
display: inline;
}
nav ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;
}
nav ul li a:hover{
color: #999999;
}
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
heres a picture of how it looks atm:
normal: http://gyazo.com/8f6553245b736feee8cc5ebf8d4a030c
while hovering over "catalogus": http://gyazo.com/662eee4bbbb2ea2318925be76b3722d2
You have nearly got it. I have only made some minor changes to the CSS to make it work.
nav ul li { display: inline-block; height: 100%; } instead of just display: inline is required so that the each <li> takes up all the height of the "menu" otherwise there is a small gap between the bottom of the <li> and the sub-menu which would cancel the :hover event since you are out of the <li>. inline elements do not have height (or width), so changed to display: inline-block.
The CSS at the end is where the other changes are. Your code is:
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
The display code doesn't need to be anything more than
nav ul li:hover ul {
display: block;
}
But to position the sub-menu outside of it's normal flow (which is currently appearing next to the parent menu item), you need to add an absolute position to the sub-menu `.
nav ul ul {
display: none;
position: absolute;
}
If you want a horizontal menu, that should be all the changes needed, since your rule nav ul li { display: inline-block; }will already apply to the sub-menu list-items. If you want a vertical menu, you need to reset the display back to the default list-item or block with:
nav ul ul li {
display: block;
}
See demo
Don't do it yourself. I use this jquery plug-in and its great:
Superfish
If you are having problems with anything I'd reccomend you to google them first. Here's a generator (just choose the one you want and follow the instructions):
Css drop down menu maker
I would also reccomend you to actually learning the language and expanding your knowledge, as well as googling questions before posting them here.
HTML :
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
CSS :
nav {
margin: -20px 0px 0px 0px;
text-align: center;}
nav ul ul {
display: none;
padding-right: 8px;}
nav ul li:hover > ul {
display: block;}
nav ul {
background-color: red;
border: 1px solid black;
list-style: none;
position: relative;
display: inline-table;}
nav ul:after {
content: ""; clear: both; display: block;}
nav ul li {
float: left;}
nav ul li:hover a {
color: #999999;}
nav ul li a {
display: block;
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;}
nav ul ul li {
float: none; position: relative;padding: 10px;}
nav ul ul li a {
color: #fff;}
nav ul ul ul {
position: absolute; left: 100%; top:0;}
Related
I have an existing responsive nav menu that I want to add a sub-menu to (actually it is just one link under one of the top menu items). Sounds like it should be very EASY, but I cannot figure it out. As soon as I add the link, it either ends up just below the top item (making the whole nav grow down with it) or displaying "none" makes it disappear and not come back on hover. Is there a simple way to do this with CSS only? I hope my question is clear enough. I will include my necessary code. If you give me code, please tell me where to put it. I am a Newbie. Thanks so much for any help.
HTML:
<nav><a href="index.html">
<div id="logo"><img src="images/logo-text.png" alt="CBS Stuctures, Inc."></div>
</a>
<label for="drop" class="toggle">MENU</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>HOME</li>
<li>COMPLETED PROJECTS</li>
<li>STRUCTURES
<ul>
<li>Video Presentation</li>
</ul>
</li>
<li>NEW PRODUCTS</li>
<li>CONTACT</li>
</ul>
</nav>
CSS:
nav {
height: auto;
margin: 0;
padding: 0;
background-color: #000;
}
#logo {
display: block;
float: left;
padding: 0;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
display: inline-block;
font-size: 1.5em;
list-style: none;
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.toggle, [id=drop] {
display: none;
}
nav a:hover {
color: #70E4FC;
}
nav ul li ul{
display: none;
}
nav ul li ul:hover{
display: block;
}
#media (max-width: 1024px) {
#logo {
display: block;
width: 100%;
text-align: center;
float: none;
padding: 0;
}
nav ul{
width: 100%;
padding:0;
margin:0;
float: none;
background-color: rgba(16,70,56,1.00);
}
nav ul li {
width: 100%;
box-sizing: border-box;
padding: 10px;
background-color:rgba(11,51,41,1.00);
}
nav ul li:hover{
background-color:#0F4739;
}
.toggle + a, .menu{
display: none;
}
.toggle{
display:block;
background-color: #333333;
padding: 14px;
font-size: 1.5em;
cursor: pointer;
}
.toggle:hover {
background-color:#515151;
}
[id^=drop]:checked + ul{
display: block;
}
}
You can simply add a hover selector on child ul inside li of a parent ul
ul li:hover ul {display: block;}
To apply it to specific element, you must add a class to your child ul:
ul li:hover ul.childul {display: block;}
check working example here
I'm working on a pure CSS dropdown menu but ran into some alignment issues.
Specifically: the sub-menu items get moved over to the right when hovering over their respective menu item. Here's the fiddle: https://jsfiddle.net/fhakjnhe/5/
HTML
<body>
<header>
<div id="menustrip">
<div id="logo_container">
<h1>LOGO</h1>
</div>
<div id="menu">
<nav>
<ul>
<li><a id="active-page" href="#">AAA</a></li
><li>BBB
<ul>
<li style="background-color:red;">A</li>
<li>B</li>
</ul>
</li
><li>CCC</li
><li>DDD</li
><li>EEE
<ul>
<li style="background-color:blue;">A2</li>
<li>B2</li>
</ul>
</li
><li>FFF</li
><li><a id="quote-page" href="#">GGG</a></li>
</ul>
</nav>
</div>
</div>
Related CSS
header #menustrip #menu nav ul
{
list-style: none;
position: relative;
}
header #menustrip #menu nav ul li
{
display: inline-block;
}
header #menustrip #menu nav a
{
display: block;
color: #1d120c;
font-weight: bold;
font-size: 18px;
padding: 0 /*15px*/10px;
margin: 0;
border: 2px solid transparent;
}
header #menustrip #menu nav a:hover
{
border-left: 2px solid #97bc14;
border-right: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#active-page
{
color: #97bc14
}
header #menustrip #menu nav a#quote-page
{
margin-left: 15px;
border: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#quote-page:hover
{
border: 2px solid #97bc14;
background-color: #97bc14;
color: #fcffff;
}
header #menustrip #menu nav ul li ul
{
/*display: none;*/
position: absolute;
padding-left: 0;
}
header #menustrip #menu nav ul li:hover > ul
{
display: inherit;
}
header #menustrip #menu nav ul li ul li
{
/*left: -100%;*/
min-width: 100px;
float: none;
display: list-item;
position: relative;
}
I checked a similar question CSS Drop Down Menu : nav ul ul li Moved to Right and checked that margin and padding were set to 0. Also in my case, the sub-item moves to the right when hovering, it seems to remain okay while "hidden".
On line 94 of the CSS file, change display: inherit; for display: block;. The inherit property is displaying the dropdown menu as an inline-block.
i suggest you to use software Web menu maker & button maker
this software let you to create professional and beautiful menus and buttons with java script or only css.
http://www.easymenumaker.com/
I'm trying to create a dropdown menu for my personal website but something doesn't seem to go right.
HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li><li>
League</li><li>
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
Contact</li>
</ul>
</nav>
</header>
CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li {
display: inline-block;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
height: 20px;
border-radius: 2px;
}
The last few lines of code are the problem I think. The hover part covers every line-item that is within the .nav , but I don't know how to seperate the main navigation links from the sub navigation links (which should drop down) in css.
Can anyone explain to me what code I should add to let it work?
thanks.
I modified your complete code:
Here is it, There are several modification. This is may be helpful for you. You need to hide your drop-down option first and find out the time when firing it out and also how to fire.
And one important thing, you have to set your drop-down options as absolute, so that it is the child of some main option/ menu.
Modified HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li>
<li>
League
</li>
<li>Dropdown
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
Modified CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
position: relative;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li ul{
display: none;
}
.mainheader nav ul li {
display: inline-flex;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
border-radius: 2px;
}
.nav ul li:hover ul{
background: #aaa none repeat scroll 0 0;
display: block;
margin-left: -20px;
padding: 0;
position: absolute;
top: 60px;
width: 200px;
}
.mainheader nav ul li ul li{
box-sizing: border-box;
color: white;
display: inline-block;
padding: 20px;
width: 100%;
}
I suppose this is what you need:
https://jsfiddle.net/8f2hvdfh/1/
Your CSS was a mess. Check out a guide on how to make CSS dropdown menus: http://www.w3schools.com/css/css_dropdowns.asp
This gives you the basic setup:
nav ul ul {
position:absolute;
display:none;
padding-left:0;
}
nav ul li {
display:inline-block;
height:60px;
}
nav ul ul li {
display:block;
}
nav ul li a {
text-decoration:none;
color:white;
display:block;
padding:21px;
}
nav ul li:hover ul {
display:block;
}
The rest is bells and whistles. Good luck.
I am having trouble with my drop down menu, the second level items overlap each other and each item has a different width. I have searched this site and tried fixes to similar problems, but haven found anything that works. I am not a programer, but am trying to add this to my website. Here is my code:
#menu ul,
#menu li,
#menu span,
#menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu ul {
list-style: none;
position: absolute;
top: 1.1em;
}
#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul > ul > li
{
float: left;
}
#menu ul ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
width: 100px;
text-align: left;
*width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
display: block;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
/*#menu ul li a:hover
{
text-decoration: none;
}*/
#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top
left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Department
<ul>
<li>Patrol </li>
<li>Investigations</li>
<li>Records </li>
<li><a href="#" class="active">Prosecution
</a></li>
</ul>
</li>
<li>Forms</li>
<li>Gallery</li>
<li>Media</li>
<li>Contact</li>
</ul>
</div>
<br>
</body>
</html>
Fiddle
Created a class submenu and added display:block. This allows us to assign a width and height value DOM objects and stops your menu items from overlapping. In your case I assigned the class submenu to the malfunctioning menu items to avoid any conflicts with preexisting code.
Simplified version fiddle
Since you're not a programmer I took the liberty to polish up your code and remove the lines that weren't doing anything. The simplified link above has the same functionality as your code (with solution) but with less confusing classes. It may make it easier for you to continue working on your site!
To fix alignment on your website, replace the CSS for ul#menu ul with:
ul#menu ul {
display: none;
position: absolute;
top: 28px;
margin-left: 70px;
width: 100px;
text-align: left;
}
To address the submenu appearing behind your content add z-index:10 to #menu
Give the sub nav links more line-height.
Add this rule to your styles:
#menu ul li ul li {
line-height: 2em;
}
Then, to close the gap created between the main nav and the sub nav (which will prevent you from hovering over sub nav links) add a bit of padding-bottom to your existing main nav rule:
Adjust this rule in your styles:
#menu ul li a
{
/* original */
/* padding: 0.5em 1.0em 0.9em 1.0em; */
/* new */
padding: 0.5em 1.0em 1.1em 1.0em;
color: #fff;
text-decoration: none;
}
The solution above is a straight answer to your question and solves the problem you raise.
However, I would suggest you consider a better overall solution for your navigation development. Currently, it seems a bit disjointed and patched together.
Here's a great video tutorial for building clean, elegant and robust nav menus.
https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN
Try this style,
<style>
#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}
#menu li:hover {
text-decoration: none;
background: #171e35;
}
#menu .active{
background: #171e35;
}
#menu li{
position: relative;
}
#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}
#menu li li{
float:none;
}
#menu li:hover > ul{
display:block;
}
</style>
Just add this css on your style
#menu ul ul li a {
width:100%;
float:left
}
Having some trouble with my nav, i'm trying to create a dropdown menu when you hover over the "Match" link. every time I hover the mouse over the link, list will stay underneath said link and disrupt how the navigation bar looks. Any helps will be much appreciated
HTML
<nav>
<span class= "navbar-button"></span>
<ul class="navbar">
<li>Home</li>
<li>Gallery</li>
<li>Match
<ul>
<li>City</li>
<li>Coastal</li>
<li>Rural</li>
</ul>
</li>
</ul>
</nav>
CSS
body{
padding: 0;
margin: 0;
font-family: 'main';
}
.navbar {
list-style: none;
background-color: #333;
color: #fff;
margin: 0;
text-align: center;
}
.navbar > li {
display: inline-block;
padding: 1.3% 2%;
}
.navbar > li:hover {
background-color: #585858;
}
.navbar > li > a{
text-decoration: none;
font-size: 30px;
color: #fff;
}
.navbar li ul {
display: none;
}
.navbar li:hover ul{
display: block;
}
you need to use absolute positioning to break it out of the container so it won't disrupt the rest of the elements:
.navbar li ul {
position: absolute;
display: none;
background-color: #333;
margin: 0;
text-align: center;
padding: 20px;
}
Be sure to set its parent to position: relative or the body will become its container:
.navbar > li {
position: relative;
display: inline-block;
padding: 1.3% 2%;
}
JSFIDDLE
Add position absolute to: .navbar li ul