I have some HTML code of a menu, I have started creating the CSS for the menu but I have come to a halt as I am not sure where to go next
I have added this CSS so far:
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra li {
display: inline;
margin-right:10px;
}
ul.sub-menu {
display:none;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
}
So, this shows the menu in a horizontal position but I want to display the sub menus in a vertical list below the parent item.
I created a fiddle here:
I made it work by implementing the box-sizing:border-box attribute:
/*Initialize*/
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li {
list-style-type: none;
display:inline-block;
width:20%;
background: #666;
text-align:center;
}
/*Link Appearance*/
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px;
display:inline-block;
margin:0;
box-sizing:border-box;
}
/*Make the parent of sub-menu relative*/
ul#menu-my-integra li {
position: relative;
}
/*sub menu*/
ul#menu-my-integra li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu-my-integra li:hover ul.sub-menu {
display:block;
}
NOTE: you will have to adjust the % width of the 'li' elements depending on how many there are. Hope that helps!
I know I've been asking a lot of questions and you guys have been great. There are two problems I'm having with my Nav.
1) First, the NAV isn't spanning the whole way.
2) For whatever reason, under "Services", the dropdown is spanning out long enough to fit all the links, but under "About Us", "Photo Credit" isn't.
Here's the link:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
It looks to me like your <nav> element actually is spanning the full width, but nav ul is not.
Remove display: inline-table; and it spans the full width. This should fix the "Photo Credit" link as well.
Remove the display: inline-table; from the nav ul. This should fix both problems. :)
How do I get my nav bar to span my web page? I have it set up to be 850px. The container div is set up to be 850px.
Here's the link and the code:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav {
width:850px;
}
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Your nav is 850px, however your black background ( ul ) is not.
To solve: Set the black background to nav instead.
The <ul> doesn't automatically fill the width of the 850-pixel container <div>. Set the <ul> width to 100% and it will.
ul {
width: 100%;
}
If having it 100% of the width of the container is what you want just assign the width of ul as 100%
I am having a simple problem with my CSS dropdown menu, I want to make it so the dropdowns are equal length to the button above them. See example below, I just want to stretch the block to the length of the above block.
New user, can't upload image
If you use my jsFiddle link you can see my code, and edit it live. I'll post the code anyway just in case.. Note I am only posting the CSS stylesheet in here as the HTML is not part of the problem.
/* Dropdown Menu */
#nav {
float: right;
width: 600px;
height: 90px;
margin: 0 auto;
padding-top: 65px;
}
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul { display: none; }
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #3636FE;
margin-left: 1px;
white-space: nowrap;
}
#nav ul li a:hover { background: #3636FE; }
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #3636FE; }
#nav li:hover li a:hover { background: #6868FE; }
Fixed. (at least for Chrome+Firefox+IE9)
http://jsfiddle.net/QZWj3/4/
You had to add width: 100% to #nav li:hover ul and to #nav li:hover li
I have edited this post as it has partially solved my problem. However, i am faced with a new problem now and i do not wish to create a new question in case its deemed of spamming. currently, my add subject, drop subject, delete subject, manual crawl is not centralised even though i have specified it to be text-align center in #menu li li a. The sub menu's executive summary is also cut off. May I know how can i expand the submenu and centralise all my text?Thank you!
Here is my code (i am really sorry because i do not have a jsfiddle acct and is on the waiting list):
HTML
<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li>Add Subject</li>
<li>Delete Subject</li>
<li> Edit Subject</li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
This should get you running:
#menu ul, #menu li {
list-style:none;
margin:0;
padding:0;
}
#menu ul li {
float:left;
position:relative;
}
#menu ul li a {
display:block;
height:35px;
margin-right:5px;
}
#menu ul li ul {
display: none;
background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul, #menu ul li.hover ul {
display: block;
position: absolute;
top:40px;
left:0
margin: 0;
padding: 0;
z-index:1;
}
#menu ul li ul li a {
display:block;
height:35px;
width:130px
background-color: rgba(0,0,0,0.5);
}
#menu ul li ul li a:hover{
background:rgba(255,255,255,0.5);
}
One thing you missed is to set position:relative for the PARENT of the sub-menu. This is important because this resets the origin for the child item. I've also cleaned things up and removed some redundant declarations. You may need to re-style your text a bit.
One important point: All styling of the menu (other than positioning) should be applied to the A-tag, not the LI. This includes fonts. bg colours etc.
See: http://preview.moveable.com/jm/ilovelists/
Use a combinaison of position: relative and position: absolute; to fix your problem
See the JsFiddle http://jsfiddle.net/VDmJj/1/
Add :
1) position:relative; to #menu ul li
2) top:30px; left:10px; to #menu ul li:hover ul, #menu ul li.hover ul
3) width:180px; to #menu ul li ul (this can depend on the sub menu items)
This would give you the desired result by doing minimal changes. Though the css is a bit complicated for the task it is performing i.e. it can be done pretty simple by following method:
http://jsfiddle.net/tPBmV/
Here is another fiddle i found based on jquery.
http://jsfiddle.net/davidThomas/YfjzP/
Its not made by me but you could find it useful if you are comfortable enough to implement jquery.
Check out the fiddle. Did a lot of CSS changes: http://jsfiddle.net/wAGGA/
CSS:
#menu {
width:1200px;
height:35px;
padding:0px;
clear:both;
background-color:#000;
}
#menu ul{
list-style:none;padding:0 0 0 400px;margin: auto;display:block;
}
#menu ul li {
list-style:none;display:inline;float:left;width:auto;height:35px;padding:0px;line-height:35px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
#menu ul li a{
display:block;height:35px; width: auto;float:left;text-decoration:none;padding:0 0 0 25px; margin:0px 3px 0px 3px;color:#fff;text-align:center;}
#menu ul li ul {
display: none;
width: 200px; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);}
#menu ul li:hover ul, #menu ul li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index:1;
top: auto;
margin-top: 35px;
right: 0;
}
#menu ul li ul li {display: block; float: none; width: 100%}
#menu ul li ul li a{
display:block;
height:35px;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
}
#menu ul li ul li a:hover{
background:rgba(255,255,255,0.5);
}
add margin-top to sub menu like this
#menu ul li:hover ul, #menu ul li.hover ul{
margin-top:40px
}