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/
Related
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.
Good day all,
I have created a nav bar with various links, I would like to use the hover effect to have it change color on hover. Problem is that the effect is only around the word not the height of the nav bar to horizontal rules. I would like the hover effect to reach to the horizontal rules.
Here is my code:
ul{
list-style-type: none;
}
li{
display:inline;
padding-right: 50px;
}
#NavBar ul li a{
display: inline-block;
text-decoration: none;
cursor: pointer;
}
#NavBar ul li a:hover{
background-color: yellow;
}
<hr>
<nav id="NavBar">
<ul>
<li><a>Home</a></li>
<li><a>History</a></li>
<li><a>Gallery</a></li>
<li><a>Techniques</a></li>
</ul>
</nav>
<hr>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: solid silver;
border-width: 1px 0;
text-align: center;
}
nav li{
display: inline-block;
margin: 0;
padding: 0;
}
nav a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 1em;
}
nav a:hover {
background-color: yellow;
}
<nav>
<ul>
<li>
<a>Home</a>
</li><li>
<a>History</a>
</li><li>
<a>Gallery</a>
</li><li>
<a>Techniques</a>
</li>
</ul>
</nav>
The CSS selector only highlights the words because the a is targeted. If you change the a with li then It highlight the whole area of li.
Repalce:
#NavBar ul li a:hover{
background-color: yellow;
}
With:
#NavBar ul li:hover{
background-color: yellow;
}
Try this
li:hover {
background-color: yellow;
}
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;}
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>
I'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.