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!
Related
I apologize upfront if this is a simple mistake.
I'm trying to update the code for a css menu with hover effect, and when i hover over the parent li, the sub menu ul appears. When I try to hover to the submenu, it disappears; from what I can understand there's a gab between the parent li and the sub menu.
The code is for the menu is the one below:
.site-header{
border-bottom: 1px solid #DADADA;
}
.site-branding{
width: 30%;
padding-top:5px;
}
.navigation-container{
width: 70%;
}
.main-navigation ul {
clear: both;
display: block;
float: left;
}
.main-navigation{
padding-top: 5px;
display: block;
}
.main-navigation li{
display:block;
border-right: 1px dotted #DADADA;
}
.main-navigation a{
padding-right:3px;
padding-left:3px;
font-size:75%;
font-weight: lighter;
display: block;
}
.main-navigation li:last-of-type{
border-right:none
}
.main-navigation a ul{
display:none;
}
.main-navigation ul li:hover ul{
right: 50%;
margin-right: -150%;
width:180px;
position: absolute;
}
.main-navigation ul ul a{
font-size:10px;
font-weight: lighter;
width:180px;
}
.main-navigation ul ul li{
font-size:50%;
}
Thanks in advance
I would suggest that the issue lies here:
.main-navigation ul li:hover ul{
right: 50%;
margin-right: -150%;
width:180px;
position: absolute;
}
More usually it would look something like this:
.main-navigation ul li:hover ul{
left: 100%; /* start at the right edge of the parent li */
top:0% /*always align to the top of the parent li */
width:180px;
position: absolute;
}
Also the parent li should have position:relative.
Please see the capture. As you can see the first pulldown menu works properly, the sub-menu did show up and it displays in horizontally but not listing vertically.
CSS Code:
#topbanner {
width:100%; height:25px; margin:0;position:relative;background-color:#4c4e5a;display: block;}
.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { margin: 0; padding: 0; border: none; outline: none; }
.rightmenu { float: right; }
.rightmenu li a{
display: block; padding: 0 14px; margin: 3px 0;color: #f3f3f3;background-color: #4c4e5a;}
.rightmenu ul {
position: absolute;
opacity: 0;
background-color: #4c4e5a;
left: auto;
right:0;
width:180px;
}
.rightmenu ul ul {
position: absolute;
opacity: 0;
right: 100%;
top: 0%;
background-color: #4c4e5a;
width:180px;
}
.rightmenu li:hover > a { color: #8fde62; }
.rightmenu li:hover > ul { opacity: 1; }
.rightmenu ul li{
height:0;
overflow:hidden;
padding: 0;
}
.rightmenu li:hover > ul li {
height: 25px;
overflow: visible;
padding:0;
}
.rightmenu ul li a {
white-space: nowrap;
border: none;
}
I have omitted some styling in order to make the code short for you. (like shadow, border style, and round corner)
You are gonna wanna throw a
clear: both
on your ul ul li
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%
Below is the code that I am writing in HTML and I'm getting what I want perfectly in FF, Opera. My friend is able to run in IE too but I'm not... Also I am not able to see output Chrome. Any reason??
<html>
<head>
<style>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
visibility: visible;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li>cat1<ul class="jaccordion">
<li>cat1.1<ul class="jaccordion"></ul></li>
<li>cat1.2<ul class="jaccordion">
<li>cat1.2.1<ul class="jaccordion">
<li>cat1.2.1.1<ul class="jaccordion"></ul></li></ul></li></ul></li>
<li>cat1.3<ul class="jaccordion"></ul></li>
</ul></li>
<li>cat2<ul class="jaccordion">
<li>cat2.1<ul class="jaccordion"></ul></li></ul></li>
</ul>
</body>
</html>
Thanks in advance...
You have a lot of duplicate styles in your css. Try to eliminate those. Especially the uls have a lot of rules which override each other. Try to use classes for the different levels of your uls to make to rules more specific.
EDIT:
all the css code you need: (test it)
#nav, #nav ul {
line-height: 1.5em;
list-style:none; /* <- shorthand declaration is enough */
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 80px; /* <- This defines the width, no need to declare elsewhere */
}
#nav ul {
display: none;
left: 100%; /* <- % makes you indepentent of declared with in li*/
position: absolute;
top:0;
}
#nav li:hover > ul{
display:block; /* <- does all the hovermagic for you, no matter how many ul-levels you have */
}
for several reasons, this code wont work in IE 6 (if you need to support it, you need some really nasty workarounds)
Part of the issue is that you have not declared a doctype in your HTML. No declared doctype will put IE into quirksmode and then it behaves differently than what you're expecting.
You're going to want to place <!DOCTYPE html> at the top of your document.
Quirksmode Explanation
Additionally I think there are a many robust solutions available that will work a little better than yours. As previously mentioned you have many duplicate styles declared, which is likely also causing you issues.
A quick google search game up with the following solution which works really well.
CSS3 Dropdown Menu
I did a quick modification of the code there and applied it to yours. Not sure if this will do exactly what you're looking for, but it's a start.
<style>
#nav {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.5em;
}
#nav li {
position: relative;
width: 100px;
}
/* main level link */
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
visibility: visible;
}
#nav a:hover {
background: #ffffff;
color: #333333;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top: 0;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
</style>
Hope that helps!