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.
Related
I have a navigation menu on my website. It works, however when hovering over a menu item with sub-items they disappear when trying to click on them. It appears that there is a spacing issue with these items.
*Additionally, I am trying to figure out how to insert a | between the menu items. If you could share some insight that would be amazing. I only have basic coding knowledge as you can probably tell from my post.
I appreciate the assistance!
/* do not change */
.container {
overflow: unset;
}
#container ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
#container ul li ul li {
display: none;
}
/* can change */
#container {
text-align: center;
}
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
#container ul li a {
color: black;
text-decoration: none;
font-weight: bold;
display: block;
}
#container ul li a:hover {
text-decoration: none;
border-radius: 0px;
color: #1dcdfe;
}
#container ul li:hover ul li {
background-color: white;
display: block;
margin-left: 0px;
}
<div id="container">
<ul>
<li><a href='#scroll-home'>Home</a></li>
<li><a href='#'>About Us</a>
<ul>
<li><a href='#scroll-whyhere'>Why You're Here</a></li>
<li><a href='#scroll-ourmethod'>Our Method</a></li>
<li><a href='#scroll-whyus'>Why Choose US</a></li>
<li><a href='#scroll-testimonials'>Testimonials</a></li>
</ul>
</li>
<li><a href='#'>Our Services</a>
<ul>
<li><a href='#scroll-wetreat'>What We Treat</a></li>
<li><a href='#scroll-packages'>Packages & Pricing</a></li>
</ul>
</li>
<li><a href='#scroll-faq'>FAQs</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
If I'm understanding you correctly, you want horizontal separators on your top-most navigation elements.
To do this, you can add borders to your li elements and then exclude the last one, like so:
#container ul li {
// ... other styles here
border-right: 1px solid black;
}
/* Add this additional style so that the last item doesn't receive the border */
#container ul li:last-child {
border-right: none;
}
A working example can be found at https://codepen.io/BrandonClapp/pen/wvGqrmQ
Following code add the pipes between menu's
#container > ul > li {
border-right: 1px solid black;
}
#container > ul > li:last-child {
border-right: 0;
}
Well thats because you have given every li a specific height here:
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
Which does not let the box grow when its hovered. You can give the nav buttons that have the hovering option an id and give the following code:
#container ul li #drop_down{
height: 100%;
}
For hindering future confusion, if you want to select direct children, use >, like so:
#container > ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
Here you have not used it, so even the inner ul is having these attributes, which ruins it. If you change it to the code above it will get fixed. Why? because the inner ul has the display: inline-block; attribute in your code which should not be.
Furthermore, Try giving the box a background-color and a z-index, so it will not keep detecting hover in behind boxes, in this case contact button.
For your other question I refer you to this link:
How to make a vertical line in HTML
And, or:
https://medium.com/#hollybourneville/creating-border-lines-using-pseudo-elements-in-css-a460396299e8
This is a simple dropdown menu. It's a free template that uses webkit (only learning about what this is). I'm not very good with CSS and I can change so that the dropdown menu will not push the other content down the page, but this creates other problems.
The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.
Additionally, even with a transparent background, when I hover over the dropdown menu, I cannot hover over the entire list without the menu collapsing. For example, in the list below, there are 4 items, Basic, Basic Plus, Ultra, and Ultra Plus. When I've set the ul to position:relative the menu no longer pushes the rest of the content down the page, but when I try to hover over Ultra, the menu goes away.
Here is where I'm developing it:
http://www.oklahomastepparentadoption.com/truck-web/index.php
I really like how the transition works on the entire drop down menu (slide down from the top).
This is the CSS code (HTML below)
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li{
display: inline-block;
width: 18%;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active{
background: #bb1e10;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left:0;
float: left;
position: relative;
}
.top-nav ul ul li {
float:none;
width:200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display:block;
HTML CODE:
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home</li>
<li class="hvr-sweep-to-bottom" style="width:22%;">Fleet Management
<ul class="level_1">
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency</li>
<li class="hvr-sweep-to-bottom">Drivers</li>
<li class="hvr-sweep-to-bottom">Contact</li>
<div class="clearfix"> </div>
</ul>
Add position: absolute to the menu. Also make sure to update the top and background:
.top-nav ul ul {
display: none;
left: 0;
/* Changes below */
float: none;
position: absolute;
top: 62px;
background: #bb1e10;
}
Preview
Update
Add this to the .header:
.header {
position: relative;
z-index: 10000;
}
Fixes the last links:
Exactly as Praveen says, you need to make the nav absolutely positioned. Make sure though, the container 'header' is relative positioned, else it will fill 40% of the whole screen.
check out this fiddle to see what i mean: https://jsfiddle.net/ho2sph79/
.header {
position:relative;
}
.top-nav {
position:absolute;
width:40%;
top:0;
right:0;
}
you can try this http://callmenick.com/post/slide-down-menu-with-jquery-and-css and as i noticed, your css for the dropdown doesnt have any transition elements. try the link i provided it may help you out regarding transitions
Having a few issues implementing a dropdown menu for the responsive side of my website.
The cells are automatically padded apart from the top, and addding padding to the top to centre the text seems to increase padding on ALL sides.
The cells have an even padding using an IE browser, but on firefox the height gos haywire.
The method Im implementing uses :hover for the dropdown menu, will this cause problem on a mobile device?
Ive spent many days going through different methods for dropdown menus, is there a simpler or more standard way of implementing these?
(I'd prefer not to use javascript as I havent learnt the basics yet and like to understand what Im programming)
Really appreciate any help with this. Thankyou.
---HTML----
<div class="dropdown">
<ul class="nav">
<li><img class="btn" src="images/menuIcon.png"
alt="Menu button" />
<ul class="menu">
<li>Home</li>
<li>Holistic Massage</li>
<li>About Duncan</li>
<li>Testimonials</li>
<li>Prices</li>
<li>Contact</li>
<li>Location</li>
</ul>
</li>
</ul>
</div>
---/HTML---
----CSS----
.dropdown{
position: relative;
display: inline-block;
}
.dropdown .menu {
position: absolute;
top: 100%;
display:none;
margin: 0px;
padding: 0px;
list-style: none; /** Remove list bullets */
width:120%;
padding: 0;
z-index:1;
}
.dropdown ul {
list-style: none;
overflow: hidden;
}
.dropdown ul li ul li{
float: none;
padding-top:10%;
background-color: #E5E5E5;
text-align:center;
border:1px solid grey;
}
.btn {
display: block;
}
.menu li a{
padding:0px;
}
.menu li a{
font-family: gabriola, Verdana, Geneva, sans-serif;
font-size: 6vw;
font-weight: bold;
text-decoration: none;
color: #505050;
}
ul li:hover .menu {
display: inline-block;
}
---/CSS----
You're using font-size: 6VW; which means viewport width, its responsive to the screen width, I'd use %, em or px.
Use :focus for touch devices.
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
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