I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
Here's the code:
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
To move the #menu to the right and 50px down, add these properties
#menu {
position: absolute;
top: 50px;
right: 0px;
}
JSFiddle
If you want to use float and margin-top instead, you must restrict the margin to the #menu
#menu {
float: right;
margin-top: 50px;
}
JSFiddle
you seem to be targeting both the parent ul and the childs uls
try that:
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
Add float property to your list:
#menu {
float: right;
}
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
You can vary margin-right according to your website design.
If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.
Related
When I hover over one of my menu items, the menu moves to the left. Why is that?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
float: left;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
color: gray;
font-size: 20px;
}
nav li:hover a {
color: black;
font-size: 22px;
}
As i can see you need to increase the size of the menu link when use hover on it but if you increase font-size this will dislocate the position of the link and thats the reason you link was moving to left.
Use css transform:scale(1.1,1.1) property to increase the size without change in position.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
display:block;
}
nav li:hover a {
color: black;
transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
transform property should be use with prefix to let it support in all browsers.
Please remove nav li:hover a { font-size:22px; } so that it does not move left on hover
Replace float with inline-block for <li>. And you are changing font-size on hover which is creating dancing effect on list items. Better keep same font-size for normal and hover states.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
}
nav li:hover a {
color: black;
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
Try playing with flex in css3 to see if that works for growing the text. Also there is an HTML menu tag you may want to have a look at.
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
This is what I'm trying to do:
If you noticed there is space between the menu and the submenu.
The problem is that the submenu doesn't work this way, because when the mouse pointer leaves the menu the submenu disappears.
It only works if it looks like this:
How can I leave the space between the menu and the submenu and get it to work?
My Code:
JSFIDDLE CODE
HTML:
<body>
<nav>
<ul>
<li>One
<ul>
<li>1.1</li>
<li>1.2
</ul>
</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Three
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
CSS:
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
You could make use of :before to extend the "hoverable" area:
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
See this demo.
The accepted answer is beautifully simple and perfect. However, I want to add an alternative for others like myself who had to use a variation of the answer above. In my situation my sub menu is full width so to do that I do an absolute position on my sub menu to start just below the main menu - I introduce the :before element to bring in a gap of 100px. Therefore my :before code is
// Define the 100px gap between menu and submenu.
&:hover ul.sub-menu:before {
content: "";
display: block;
//Note: This height starts at the top:100% of the position absolute for the ul.sub-menu below,
//pushing the sub-menu down by the height defined here.
height: 100px;
width: 100%;
background-color: transparent;
}
The code to place the sub-menu at an absolute position below the main menu and full width is
&:hover ul.sub-menu {
background-color: transparent;
display: block;
position: absolute;
border-top: 10px solid red;
top: 100%;
left: 0;
width: 100%;
// Sub-menu appears on top of main menu.
z-index: 1;
enter code here
I have a drop down menu list made in css and plain HTMl. It works fine but it rolls under my image slider , and I can see on a part of the menu when i hover on any of my menu. I think z-index property is missing somewhere. But I used in my ul li tag but no use.
html
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
css
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
image slider has z-index property from java-script. so it will take high priority.
You need to give z-index to your navigation also.
Is your image slider having jQuery?
Than you have to put z-index in li ul li{z-index:999px;}.
If you add z-index to the following class.
li:hover ul {
display: block;
position: absolute;
z-index:1000;
}
Also make sure that the z-index for the menu is having higher property.