I'am trying to create a navigation menu with a sub menu, and fiddled with it today.
But i'am stuck at getting the sub menu of the parent menu to align it's links.
my HTML
<!-- navigation menu -->
<div class="MenuContainer">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="sub">
<li>Project1</li>
<li>Project2</li>
<li>Project3</li>
</ul>
</li>
</ul>
</div>
my CSS
.MenuContainer {
width:100%;
height:50px;
border:1px solid;
position:relative;
}
ul {
margin:0;
padding:0;
}
/*Main menu*/
li.menu {
height:50px;
float:left;
}
ul.menu li {
list-style:none;
float:left;
height:49px;
text-align:center;
}
ul.menu li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:49px;
text-decoration:none;
color:#5d5d5d;
}
ul.menu li:hover > a {
color:#fdfdfd;
}
ul.menu li:hover > ul {
display:block;
}
/*sub menu*/
li.sub {
height:40px;
float:left;
}
ul.sub li {
list-style:none;
float:left;
height:39px;
text-align:center;
}
ul.sub li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:39px;
text-decoration:none;
color:#5d5d5d;
}
If anyone can tell me where i went wrong please do. First time trying to create one from scratch.
Also if anyone know a good HTML5 / CSS3 forum / forums please don't hesitate to post a link. I have tried to find some but all are not serious or no active users.
Also this is my first post at stackoverflow so if i do a beginners mistake here, please just point it out.
Thanks on advance.
Hey i think you want this do the sun class position relative and sub ul give position absolute
.sub{
position:absolute;
}
ul.menu li {
position:relative;
}
Live demo http://jsfiddle.net/HVk4G/
Vertical menu Updated demo http://jsfiddle.net/HVk4G/1/
Related
I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.
Here is the code I'm working with:
HTML:
</head>
<body>
<div id ="header">
<div id="nav">
<ul>
<li>About</li>
<li>Philanthropy</li>
<li><img src="http://i.imgur.com/cosDXx1.png"/></li>
<li>Why Join?</li>
<li>Contact</li>
</ul>
</div>
</div>
</body
>
CSS:
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:10px;
display:inline;
margin-left:60px;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
JSfiddle link:
http://jsfiddle.net/5g6sm01q/
On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.
Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..
see this http://jsfiddle.net/5g6sm01q/2/
Chnge the css like this
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:0.5%;
display:inline;
margin-left:2%;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
UPDATE
As #Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection
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 have made a multi tier navigation menu and have an issue where tiers below tier 1 have an unexpected block to the left of the options. I assume the issue stems from having a background gradient but have not been able to resolve the issue so far. Can anyone shed any light on this for me please?
have put a link below.
http://tinypic.com/r/2pr7alj/5
The HTML code below:
<div id="menu">
<ul class="menu1"><!--Start of menu level 1-->
<li>#Html.ActionLink("Home","#","Home")
</li>
<li>#Html.ActionLink("A","#","A")
<li>#Html.ActionLink("B","#","B")
<ul class="menu2"><!--Start of menu level 2-->
<li>#Html.ActionLink("1","#","1")
<li>#Html.ActionLink("2","#","2")
<li>#Html.ActionLink("3","#","3")
</li><!--End of menu level 2-->
</ul>
</li>
<li>#Html.ActionLink("C","#","C")
</li>
</ul><!--End of menu level 1-->
</div>
Below is the CSS related to the menu.
#menu {
width:100%;
height:44px;
background: linear-gradient(to bottom, #7db9e8 19%,#2989d8 51%,#1e5799 67%,#1e5799 81%,#207cca 100%);}
ul.menu1 {
list-style-type:none;
float:left;
margin-top:0px;}
ul.menu2, ul.menu3, ul.menu4{
list-style-type:none;}
ul li {
float:left;
width:200px;
position:relative;}
ul li a {
text-decoration:none;
font-size:1em;
color:#fff;
font-weight:bold;
display:block;
padding: 5px 5px 5px 5px;
margin:0px;
line-height:32px;
border:1px solid;
text-align:center;
white-space:nowrap;}
ul.menu2 {
display:none;
position:absolute;
left:-40px;}
ul.menu3, ul.menu4 {
display:none;
position:absolute;
left:160px;
top:0px;}
ul li:hover ul.menu2 {
display:block;
background-color:#2472bb;}
ul ul li:hover ul.menu3 {
display:block;
background-color:#2472bb;}
ul ul ul li:hover ul.menu4 {
display:block;
background-color:#2472bb;}
ul li:hover > a {
background-color:#839ab6;}
ul li:hover a:hover {
background-color:#538dd5;}
There's extra left padding to your menu1, menu2, etc. for some reason. Not sure how. But all you need to do is set padding-left to 0:
ul.menu1, ul.menu2, ul.menu3, ul.menu4{
padding-left:0;
}
And remove "left:-40" from ul.menu2{...} to make it look nice.
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
I tried to do a dropdown menu, but I have a lot of questions and it seems I am doing all wrong. Some of the major question that are perturbing my dreams are:
Should I use list-style:none; on ULs or LIs (or both)?
Is it better to put background-color and border on As or LIs?
Should the LIs that are inside the absolute floating UL have
float:left; or position:relative;?
The code I am using seems of work, but my biggest fear is that I am writing unnecessary lines or even bad coding.
Please help.
The CSS I am using:
*{
padding:0;
margin:0;
}
#menu{
margin:0 auto;
width:800px;
background:#999;
border:1px solid #777;
}
#menu ul{
list-style:none;
border-right:1px solid #aeaeae;
/*Not sure about this V*/
position:relative;
float:left;
}
#menu li ul{
font-weight:normal;
display:none;
position:absolute;
border:1px solid #777;
width:200px;
/*Not sure about this V*/
float:none;
margin-left:-2px;
}
#menu li{
display:block;
position:relative;
float:left;
background:#999;
border-right:1px solid #777;
border-left:1px solid #aeaeae;
}
#menu li li{
float:none;
background:#eaeaea;
border:0;
border-top:1px solid #666;
}
#menu li:hover{
background:#a6a6a6;
}
#menu li li:hover{
background:#f5f5f5;
}
#menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 15px;
}
#menu li ul a{
color:#333;
}
#menu a:hover{
color:#fff;
}
#menu li ul a:hover{
color:red;
}
#menu li li:first-child{
border-top:0;
}
.clear{
clear:both;
font-size:0;
line-height:0;
}
The HTML structure is:
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<li>Drop Down
<ul>
<li>DD Item</li>
<li>Another One</li>
<li>Last DD Item</li>
</ul><div class="clear"></div>
</li>
</ul><div class="clear"></div>
</div>
I am using JQuery to show/hide the menu with:
$('#menu ul li').hover(function(){$('ul',this).slideDown(100);},
function(){$('ul',this).slideUp(100);});
The code I used is strongly modified, but taken from here
Your dreams are probably safe. That is, your CSS looks pretty good overall. You may want to consider using Twitter Bootstrap for some of what you're doing (awesome drop-downs), but you can certainly roll-your-own.
To answer your questions:
Should I use list-style:none; on ULs or LIs (or both)?
Just on ul's.
Is it better to put background-color and border on As or LIs?
Put them on the li elements.
Should the LIs that are inside the absolute floating UL have float:left; or position:relative;?
These accomplish entirely different things. Floating left should be sufficient, but you may want to do both.
You should also refactor your jQuery code, despite the fact that it works:
$("#menu ul li").hover(
function () {
$(this).children("ul").slideDown(100);
},
function () {
$(this).children("ul").slideUp(100);
}
);