I am trying to make a navigation bar with drop down menus. I've created the navigation bar and used bootstraps "pull-left" class to move it to the left. But the dropdown menu I have created using jQuery is now also moved the left since the HTML code is contained in the div marked as "pull-left" I have googled and tried out stuff for a few hours, but I couldn't quite find a solution.
The HTML for the Navigation bar
<div id = "nav">
<div class = "container" >
<div class = "pull-left ">
<img class = "logo-image" src = "Logo2.png" />
</div>
<ul class = "pull-left">
<li class "logo">Home</li>
<li>About</li>
<li>
Projects
<ul>
<li>Stealth Game </li>
</ul>
</li>
<li>Gallery</li>
<li>Tutorials</li>
</ul>
<ul class = "pull-right">
<li> Follow me</li>
</ul>
</div>
The CSS
#nav li{
display:inline;
padding-right : 5px;
}
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
#nav li li {
float: auto;
}
#nav li a {
width:150px;
display: inline-block;
text-align:center;
color:#000;
margin-right:5px;
height:35px;
line-height:35px;
text-decoration:none;
font-size:80%;
border:1px solid #ccc;
}
#nav ul{
list-style-type:none;
margin:0;
padding:0;
}
#nav li li a {
background:#EBE7E6!important;
text-align:left;
height:auto;
line-height:1;
width:150px;
padding:8px 20px 8px 22px;
border:1px solid #D0D0D0;
border-top:none;
margin-right:0;
}
And the JavaScript
$(document).ready(function() {
$("#nav li:has(ul)").hover(function(){
$(this).find("ul").slideDown();
}, function(){
$(this).find("ul").hide();
});
});
So the actual problem is, that the submenu, that is appearing doesn't appear under the menu it is opened from, but is also pulled to the left since I used this bootstrap class to move my navigation bar to the left.
Two things resolve this:
#nav li {
display:inline-block;
...
}
#nav ul ul {
position:absolute;
...
}
Demo
You have:
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
The position:fixed on the submenu is probably what is giving you positioning problems.
edit:
you want to use position: absolute instead.
another edit, set position: relative on the parent LI, you will also need to set the display to block and because they are no longer inline elements you will want to float them left:
#nav li{
position: relative;
display: block;
float: left;
padding-right: 5px;
}
Fiddle with this working: https://jsfiddle.net/DTcHh/
Related
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
Question
I am trying to put every li at the bottom of the ul, making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. What is the best way to accomplish this?
Its likely there's a question that already answered this, but I've spent a lot of time searching. If there's one that applies, please just point me to it.
Example
Fiddle With It:
http://jsfiddle.net/rxg9m/
HTML
<head runat="server">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="outer">
<div id="inner">
<nav>
<ul>
<li>Home
</li>
<li>Product
</li>
<li><img src="logo.png" alt="Javid Logo"/>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
</nav>
</div>
</div>
</body>
CSS
* {
font-family:Calibri;
}
#outer {
text-align:center;
}
#inner {
display:inline-block;
}
nav ul {
margin:0px;
padding:0px;
bottom:0;
list-style:none;
}
nav li {
float:left;
display:table-cell;
vertical-align:bottom;
margin:0px;
padding:0px;
}
nav li a {
padding:16px 8px 16px 8px;
margin:0px;
width:120px;
display:block;
background-color:lightblue;
text-decoration:none;
text-emphasis:none;
color:black;
border:0px none black;
border-bottom:1px solid black;
}
nav li a.left {
text-align:left;
}
nav li a.right {
text-align:right;
}
#logo {
padding:0px;
width:auto;
height:auto;
line-height:0px;
border:0px none black;
}
Fiddle Here: http://jsfiddle.net/SinisterSystems/rxg9m/2/
nav li a {
padding:32px 8px 0px 8px;
You are setting a padding on the bottom. You should counteract that and double your padding on top and set your padding-bottom to 0.
Because you had padding applied, it WAS on the bottom technically. The only problem is it also expanded all the way to the top.
Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/
Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. That way, you can use position:relative; on the wrapper and absolutely position your ul to the bottom. And yeah, style from there.
Basic Example:
<div class="wrapper">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
* {
margin:0;
padding:0;
}
.wrapper {
height:200px;
background:#CCC;
position:relative;
}
ul {
position:absolute;
bottom:0;
width:100%;
}
ul li {
list-style:none;
float:left;
display:inline-block;
min-width:25%;
text-align:center;
}
http://jsfiddle.net/rxg9m/1/
Your issue was with this
nav li a {
padding:16px 8px 16px 8px;
change it to
nav li a {
padding:16px 8px 0px 8px;
also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer.
Simply remove the float:left from nav li. Everything else is in order.
Fiddle
http://jsfiddle.net/mXTG6/
I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I hav a simple nav bar that i want to convert into a drop down nav bar, but i am not sure what i have to do to accomplish this. Do i need a certain javascript code or css. thanks
/* navigation menu */
div#navigation {
height:55px;
background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
background:transparent url('images/nav-left.png') no-repeat scroll top left;
height:55px;
}
div#navigation ul {
background:transparent url('images/nav-right.png') no-repeat scroll top right;
list-style:none;
margin:0;
padding:0 10px;
position:relative;
top:0;
height:55px;
display:block;
}
div#navigation ul li {
display:block;
float:left;
}
div#navigation ul li a {
display:block;
float:left;
color:#ffffff;
border-bottom:none;
height:32px;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
font-size:1.2em;
padding:14px 20px 9px;
border-right:1px solid #060D14;
border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
border-left:none;
}
div#navigation ul li.navright a {
border-right:none;
}
div#navigation ul li a:hover {
color:#FC8228;
}
<div id="navigation">
<div id="innernav">
<ul>
<!-- top navigation -->
<!-- add class navleft to first item and navright to last item as shown -->
<li class="navleft">home</li>
<li>examples</li>
<li>solutions</li>
<li>our service</li>
<li>support</li>
<li class="navright">contact</li>
</ul>
</div>
</div>
Here is an example that uses the suckerfish methodology:
http://jsfiddle.net/uCdGc/
Here is the magic CSS:
/* Code for dropdown */
#navigation ul li ul {
position: absolute;
left:-999em;
}
#navigation ul li ul li {
float:none;
/* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
left:auto;
margin-top:55px;
}
For more on suckerfish, check out this url: http://www.htmldog.com/articles/suckerfish/dropdowns/
What I've done is added a ul element containing subnavigation elements to your "Examples" navigation item. When you hover over, the CSS will position the subnavigation so that it appears where you want it. This should work without any javascript, but if you want to support IE 6, you will need to include the jQuery javascript library and the code in the javascript block in the example.
Right now the subnavigation is styled plainly, but add more styles as you need. I've commented where you should add them.
Good luck.