Right then... I created a menu which worked perfectly fine but afterwards found out I needed to add drop-down which I done but for some reason it is showing horizontally and aligning itself to the left instead of being vertical and aligning itself underneath the link you hover over. What's annoying is that I did create one that worked perfectly fine on another site, I have tried to match up to coding from the last one to this one but as they are styled differently it is not going well.
The html for the menu is:
<body>
<div id="header">
<div id="menu_container">
<nav>
<ul>
<li>Home</li>
<li>Overview</li>
<li>Strategy</li>
<li>Marketing</li>
<li>Team and Management</li>
<li>Gallery
<ul>
<li>Edgbaston</li>
<li>Hockley</li>
<li>Selly Oak</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
The CSS is:
nav ul {
list-style: none;
text-align: center;
position: relative;
display: inline-table;
}
nav ul li {
display: inline;
}
nav ul li a:link, nav ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800px;
color: #FFFFFF;
line-height: 14px;
margin: 0px 10px;
padding-bottom: 8px;
border-bottom: 1px solid #FFFFFF;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover, nav ul li a:active {
border-color: #f9cf19;
}
nav li ul {
display: none;
z-index: 999;
}
nav li:hover ul {
display: block;
position: absolute;
}
nav li:hover li a:hover {
background: #000000;
}
Any help would be greatly appreciated. Thanks guys.
Edit: Here is a link to the site: http://vicarage-support.com/our_hostels.html
The link is only on that page, once I have it working and the page finished I will add it to the others.
And one to a fiddle: http://jsfiddle.net/e7y6U/
SeeTheC Came up with the solution to get it to vertically align but to get it align underneath the link you hover over you have to add this to the ul li:
nav ul li {
display: inline;
position: relative;
float: left;
}
on Hover
add this :
nav li:hover>ul>li {
display: block;
}
By this it will come in vertical.
You just have to align the position of it.
try to add this :
ul > li
{
position:relative
}
Just realised it doesn't work on IE
Related
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/
This is my website.. when you hover over the nav items and a drop down list appears, i want the drop down list to have white text permanently, not turn white.
Also if anyone knows how to make it so when you hover over the menu items a black line appears under the word not the whole background of the word goes black?
http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/
#nav {
padding: 50px;
width: 924px;
height: 100px;
float: none;
}
#nav ul {
list-style: none;
margin-left: 5px;
width: 1000px;
display: table;
}
#nav a {
text-decoration: none;
color: #161717;
}
/*hide sub menu*/
#nav li ul {
display: none;
}
/*show and position*/
#nav li:hover ul {
display: block;
position: absolute;
margin-left: 0px;
margin-top: 0px;
}
/*main nav*/
#nav li {
width: 140px;
font-size: 14px;
display: inline-block;
-webkit-transition: all ease 0.3s;
}
#nav li:hover {}
/*sub nav*/
#nav li li {
color: white;
display: block;
background-color: black;
font-size: 11px;
padding-top: 5px;
padding-left: 5px;
width: 100px;
}
#nav li li:hover {
background-color: #A83133;
}
#nav a:hover {
color: white;
}
<div id="nav">
<div id="firstnav">
<ul>
<span class="font4"><li>SIGN IN</li>
<li>SIGN UP</li>
<li>MY TRIP</li>
</ul></span>
</div>
<ul>
<li>DESTINATIONS
<ul>
<li>Popular Places
</li>
<li>Other places
</li>
</ul>
</li>
I'm unsure if your question is about your top-link turning black when not being hovered
The reason this is happening is you put your hover on your a-element.
a-tags are by default inline elements. Which means they will only take up as much space as the text.
This means that when you hover on your li-element the hover on your link is no longer in effect.
You could change the color of your link when you hover on your li-element instead.
#nav li:hover a {
color:white;
}
As for the black line.
You could just add a border bottom to either your li-elements(if you want it to be the full lenght) or your a-elements(if you want it to only be as long as your word)
#nav li:hover
{
border-bottom: 1px solid #000;
}
Edit: This is a sollution for your top menu-item turning black when hovering. Was this your issue or did you want to change the color of your sub-items?
If so you can just do the following
#nav li li a
{
color:white
}
so the submenu should always have white text?
#nav ul li ul a {
color:#ffffff;
}
but i would recommend to do it with classes... so you do not have such large selectors and you can easily use that styling on other pages.
furthermore if you need to change the html tree or instead of using a list perhaps a div it wont work anymore. so go for classes :).
greetings timotheus
I am having some problem getting my navigation bar to work. Here is the desired output for my navigation bar: example.
I am trying to make it so that when the user hovers the top level of the navigation bar, a drop down list is shown.
However, the second level of my navigation bar is just floating around. How can I style it?
This is my HTML:
<div id="menubar">
<ul id="menu">
<li class="selected">Home</li>
<li>Volunteers
<ul>
<li>Add</li>
<li>View</li>
<li>Update</li>
</ul>
</li>
<li>Packaging Session
<ul>
<li>Add</li>
<li>View</li>
<li>Update</li>
</ul>
</li>
</ul>
</div>
And this is my CSS:
#menubar
{ width: 900px;
height: 72px;
padding: 0;
background: #1293EE;}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
{ list-style: none;}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #0D66A5;}
ul#menu li ul li a
{
display: none;
height: auto;
margin: 0;
padding: 0;
position:absolute;
}
In google chrome:
In Internet Explorer:
Instead of hiding every a tag in the dropdown, rather hide the entire ul, and use that as the position element, and style the li's and a's as any other element.
Example: http://jsfiddle.net/gd2SX/
Look for the area, that says "Added styles".
HTMLDog made a very interesting and comprehensive article about floating menus: Sons of Suckerfish.
You will be particularly interested in the part about dropdowns, and particularly the sample they provide.
It will help you correct much more than just your floating problem.
For your particular problem, I suggest that you disable the hiding of the menus, style everything to look perfect as if all the submenus were open, and then re-activate the hiding of submenus:
/* Lists directly inside list-items. */
li>ul {
display: none;
}
/* Lists directly inside hovered list-items. */
li:hover>ul,
li.selected>ul {
display: block;
}
Then you will find it much easier to fix.
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;}
Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}