I am trying to create a basic navigation bar using an unordered list, but for some reason I can't get the bullets to go away.
I have searched for a solution on Google and to me it seems like it SHOULD be working, but I think I might be messing up something that isn't related to the style of the ul, which is in turn preventing the ul style from being applied.
Here is the relevant html:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Examples</li>
<li>Contact Us</li>
</ul>
</div>
and here is the CSS:
#nav ul
{
list-style-type: none;
position: absolute;
top: 10px;
right: 0;
margin: 0;
padding: 0;
}
#nav ul li
{
float: left;
}
#nav ul li a
{
display: inline;
float: left;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#nav ul li a:hover
{
padding-top: 12px;
background-color: #075a97;
}
Just to be certain, I usually apply it to the lis too:
#nav ul li
{
list-style-type: none;
float: left;
}
Something else to check is to use a tool like firebug for firefox and right-click on a list-item and do a 'inspect element'. From there you can see the styles that are actually applied to it and where they stem from, which ones are overriding which, etc.
More than likely, what's happening (with the other answer and comment) is that you've got some other style that's making the bullets show up-- which is where firebug will really help you out.
I don't see any bullets either.
maybe try a full refresh: CTRL+F5 or CTRL+R
And you may try this css
#nav ul li{ list-style: none; }
It works. You may have another rule that cancels out the #nav ul. You can probably test it by adding
body #nav ul
This is what I use for my horizontal menu bar using CSS. I've never had any problems with it.
#nav {
padding-bottom: XXpx;
margin:0px auto;
}
#nav ul { list-style:none;
padding: XXpx;
margin: XXpx;
}
#nav ul li {
float:left;
}
#nav span {
position:absolute;
left:-9999px;
}
Related
I am coding a very simple CSS navigation menu. I’m trying to stretch the nav to 100% width across the page and set the last menu option to orange background color and white text color to no avail.
Can someone have a look at my CSS code and see where my problem is?
body {
background: #282828;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
margin-right: 5px;
padding: 10px 20px;
position: relative;
height: 20px;
line-height: 20px;
background-color: #282c2b;
color: #fff;
}
#nav > ul > li {
float: left;
height: 30px;
line-height: 30px;
background-color: #282c2b;
border-left: 4px solid #282c2b;
}
#nav li > ul {
visibility: hidden;
position: absolute;
top: 0px;
color: #fff;
}
#nav > ul > li > ul {
width: 100%;
top: 50px;
margin-bottom: 10px;
left: -4px;
}
#nav li:hover {
background-color: #ffffff;
color: #282c2b;
border-left: 4px solid #ff3d00;
}
#nav li:hover > ul {
visibility: visible;
}
#nav ul li .navOrange {
background-color: #ff3d00;
}
Here’s a CodePen
I know it might be hard to achieve this with pure CSS but is it possible to make the menu drop down upon clicking or is it just set to rollover without JavaScript?
so i decided to change it up a little and use elements because it suits me better.
so i now have the following;
http://codepen.io/anon/pen/waKENz
when i add around the div elements it doesnt use the style setup in css, why is it doing this?
and is it possible to perhaps have menu option 4 perform a dropdown on rollover as before or not with elements.
You might have to target each navigation item seperately by setting a percentage width for the item and probably a percentage margin also. Make sure they all add up to 100%.
#nav > ul > li {
margin: 0 1%;
}
.home,
.level-1,
.support,
.sign-up {
width: 18%;
}
.info {
width: 20%;
}
.home {
margin-left: 0;
}
.sign-up {
margin-right: 0;
}
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="info">Information</li>
<li class="level-1">Level 1</li>
<li class="support">Support</li>
<li class="sign-up">SIGN-UP!</li>
</ul>
</div>
Here's a demo jsFiddle (not full code).
The last item in the navigation is not turning orange because the selector is incorrect. You have:
#nav ul li .navOrange { background-color: #ff3d00;}
Which says (working right to left), select any element with the class of .navOrange that is a child of any li that is a child of any ul that is a child of #nav. .navOrange is an not a child of an li but on class on an li and also a child of a ul.
Remove li from the selector and it will work.
#nav ul .navOrange { background-color: #ff3d00;}
About the orange background color: you need to remove the space between "li" and ".navOrange" in the last definition. This will make it more specific than the other definitions and be applied later.
Full width can be achieved relatively simply if you know how many options you'll have in the menu with resizing the buttons to an adequate percentage. Though be careful with this - you generally want something less than 20% with 5 buttons because of the margins etc.
The hover menu that you already have is pure CSS, I don't know of a way to make it onclick without JavaScript.
Please check this code snippet.
body {background: #282828;}
#nav ul{ margin:0; padding:0; list-style:none; }
#nav ul li{ margin-right:5px; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#282c2b; color:#fff; }
#nav > ul > li { float: left; height:30px; line-height:30px; background-color:#282c2b; border-left:4px solid #282c2b; }
#nav li > ul{ visibility:hidden; position: absolute; top:70px; color:#fff;
transition: all 0.2s ease-in;
opacity: 0;
}
#nav li.have-item:hover ul{
visibility:visible;
top:50px;
opacity: 1;
}
#nav > ul > li > ul{ width:100%; margin-bottom:10px; left:-4px; }
#nav > ul > li > ul li{
width:100%;
}
#nav li:hover{ background-color:#ffffff; color:#282c2b; border-left:4px solid #ff3d00; }
#nav li:hover > ul{visibility:visible;}
#nav > ul > li:last-child { background-color:#ff3d00 !important; }
<div id="nav">
<ul>
<li>Home</li>
<li>Information</li>
<li>Level 1</li>
<li class="have-item">Support
<ul>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li class="navOrange">SIGN-UP!</li>
</ul>
</div>
Hy, I am very new to html programming and I am trying to make a site. The problem is that I don't understand why I get a white space, in the right of my menu and image,even though I set the width to 100%.I am using Google Chrome.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<title>Home</title>
</head>
<body>
<nav>
<ul>
<li>Contact
</li>
<li>Muzica</li>
<li>Evenimente
<ul>
<li>Intalnire cu fanii</li>
<li>Concerte</li>
<li>Lansari</li>
</ul>
</li>
<li>Bio
<ul>
<li>Formatia</li>
<li>Istoric</li>
</ul>
</li>
</ul>
</nav>
<div>
<img src = "beregratis.jpg" height=100% width=100% />
</div>
</body>
</html>
Here is the css code:
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
width:100%;
margin-left:-10px;
margin-top:-10px;
margin-right:0px;
background: #A0A0A0 ;
border-style:solid;
border-color:#404040;
padding: 0 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li
{
float: right;
}
nav ul li:hover
{
background: #4b545f;
}
nav ul li:hover a
{
color: white;
}
nav ul li a
{
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul
{
width:auto;
background: #4b545f;
border-radius: 0px;
margin-top:0px;
margin:auto;
margin-left:0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
div
{
margin-top: -20px;
margin-left: -10px;
}
And here's the link to the image:
http://www.beregratis.ro/images/bere_gratis_2011_02.jpg
1) Add
html, body {
margin: 0;
padding: 0;
}
This will take away the browser defaults for the html and body element.
2) For the menu please remove the
margin-left:-10px; under nav ul.
The -10px margin left is pulling the menu to the left
First of all, you should add html,body{margin:0;} as some browsers add margin to that element.
Main issue you are experiencing :
You are adding a negative margin-left on several elements (.nav ul and .div) so they can't go all the way right and therefore there is a whitespace on the right of image and nav bar.
Here is your code I corrected in this FIDDLE
try with a css reset, there is many of them, like this one http://nicolasgallagher.com/about-normalize-css/
or just ad this at the begin of the stylesheet *{margin:0; padding:0;} that whill reset all the elements to margin and padding 0, if u have this kind of trouble the best u cand do is use the developer tool from your browser, go to metrics, and see whats that blank space, in google chrome for example, if that space apears in green its a paddin, if it is orange is a margin
Try to use a CSS reset for all browsers behave the same way. I just tried to delete the negative margin-left in ul and the space disappeared. Here is the code http://jsfiddle.net/qE69s/
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 am redesigning this website and other than a bit of content that still needs to be added, I thought I had all of the issues worked out. Unfortunately, when I checked the page in Safari, I discovered that the drop down nav menu isn't rendering properly. It works fine in all other browsers I've checked, but in Safari, when I hover over "Practice Areas" to get the drop down, all of the sub-categories are underlined.
(Unfortunately, I don't have enough reputation to post images, so you'll have to open the website in the different browsers to see what I'm talking about)
On every other browser, only the item you are actually hovering over is underlined.
My CSS code is:
/**NAV MENU**/
#sub_nav {
margin: 35px 0px 0px 550px;
font-size: 16px;
}
#sub_nav ul {
list-style: none;
}
#sub_nav li:hover {
text-decoration:underline;
}
#nav > li {
float: left;
}
#nav li {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color: #fff;
}
#nav li a {
text-decoration: none;
}
#nav ul {
position: absolute;
display: none;
z-index: 999;
}
#nav li:hover ul {
display: block;
}
#nav li ul li{
width: 145px;
}
and the html code is
<div id="sub_nav">
<ul id="nav">
<li>Home</li>
<li>Profile</li>
<li>
Practice Areas
<ul>
<li>Juvenile Law</li>
<li>White Collar Crimes</li>
<li>Drunk Driving</li>
<li>Sex Crimes</li>
<li>Domestic Violence</li>
<li>Drug Offenses</li>
</ul>
</li>
<li>Case Results</li>
<li>Contact Us</li>
</ul>
</div>
Also, I got the basis for the code from this website.
In case it matters, I have Safari 5.1.7
change:
#sub_nav li:hover {
text-decoration:underline;
}
width:
#sub_nav li a:hover {
text-decoration:underline;
}
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;}