I have a problem with pure CSS navigation. I floated my top-level items and now all my submenues are hidden inside of the main navigation. I tried with clears, positioning and z-indices and nothing works.
The best I achieved is my top-level menu expanding on hover, whish I don't want. Any advice?
I'm sure this has an answer somewhere, but I have been searching all over youtube, blogs and stack for an answer and couldn't find what I needed.
html {
height: 100%:
}
body {
height: 100%;
}
#menu-novo-container {
border-collapse: collapse;
font-family: tahoma, Arial, helvetica, Serif;
background-color: #336699;
min-height: 38px;
position: relative;
}
#menu-novo {
padding: 0;
height: inherit;
}
#menu-novo * {
margin: 0;
padding: 0;
}
#menu-novo .menu-novo-item {
cursor: pointer;
list-style: none;
font-size: 16px;
color: #FFF;
font-weight: normal;
padding: 4px 7px 4px 7px;
border-right: 1px solid white;
word-wrap: break-word;
min-height: 38px;
width: auto;
}
#menu-novo .root-item {
text-align: center;
float: left;
height: inherit;
position: relative;
}
.level-1-item,
.level-2-item,
.level-3-item {
font-size: 14px;
border-left: solid 1px #DEE8F5;
border-right: solid 1px #DEE8F5;
border-bottom: solid 1px #DEE8F5;
height: 30px;
float: none;
}
.level-1-submenu, .level-2-submenu, .level-3-submenu {
display: none;
position: relative;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
.level-1-submenu {
bottom: 0;
left: 0;
}
.level-2-submenu {
top: 0; /*shouldn't this be positioned relative to parent*/
left: auto;
right: -99.5%;
}
#menu-novo .root-item:hover > .level-1-submenu {
display: block;
}
#menu-novo .level-1-item:hover > .level-2-submenu {
display: block;
}
#menu-novo .level-2-item:hover > .level-3-submenu {
display: block;
}
.menu-novo-link,
.menu-novo-link:visited,
.menu-novo-link:active {
text-decoration: none;
color: #FFF;
}
.novo-clear {
width: 0;
height: 0;
clear: both;
}
<div id="menu-novo-container">
<ul id="menu-novo">
<li class="menu-novo-item root-item"> 1
<ul class="menu-novo-submenu level-1-submenu">
<li class="menu-novo-item level-1-item">1.1</li>
<li class="menu-novo-item level-1-item">1.2</li>
<li class="menu-novo-item level-1-item">1.3</li>
<li class="menu-novo-item level-1-item">1.4.
<ul class="menu-novo-sumbenu level-2-submenu">
<li class="menu-novo-item level-2-item">1.4.1</li>
<li class="menu-novo-item level-2-item">1.4.2</li>
<li class="menu-novo-item level-2-item">1.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
[SOLUTION]
It was my stupid mistake all along. I didn't define the background and it was invisible, but there... That's three days of work down the drain.
Try this one.
html {
height: 100%:
}
body {
height: 100%;
}
#menu-novo-container {
border-collapse: collapse;
font-family: tahoma, Arial, helvetica, Serif;
background-color: #336699;
min-height: 38px;
position: relative;
}
#menu-novo {
display: inline-block;
height: inherit;
margin: 0;
padding: 0;
width: 100%;
}
#menu-novo * {
margin: 0;
padding: 0;
}
#menu-novo .menu-novo-item {
cursor: pointer;
list-style: none;
font-size: 16px;
color: #FFF;
font-weight: normal;
padding: 4px 7px 4px 7px;
border-right: 1px solid white;
word-wrap: break-word;
min-height: 38px;
width: auto;
}
#menu-novo .root-item {
float: left;
height: inherit;
position: relative;
text-align: left;
width: 100%;
}
.level-1-item,
.level-2-item,
.level-3-item {
font-size: 14px;
border-left: solid 1px #DEE8F5;
border-right: solid 1px #DEE8F5;
border-bottom: solid 1px #DEE8F5;
height: 30px;
float: none;
}
.level-1-submenu, .level-2-submenu, .level-3-submenu {
display: none;
position: relative;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
.level-1-submenu {
bottom: 0;
left: 0;
}
.level-2-submenu {
top: 0; /*shouldn't this be positioned relative to parent*/
left: auto;
right: -99.5%;
}
#menu-novo .root-item:hover > .level-1-submenu {
display: block;
}
#menu-novo .level-1-item:hover > .level-2-submenu {
display: block;
}
#menu-novo .level-2-item:hover > .level-3-submenu {
display: block;
}
.menu-novo-link,
.menu-novo-link:visited,
.menu-novo-link:active {
text-decoration: none;
color: #FFF;
}
.novo-clear {
width: 0;
height: 0;
clear: both;
}
<div id="menu-novo-container">
<ul id="menu-novo">
<li class="menu-novo-item root-item"> 1
<ul class="menu-novo-submenu level-1-submenu">
<li class="menu-novo-item level-1-item">1.1</li>
<li class="menu-novo-item level-1-item">1.2</li>
<li class="menu-novo-item level-1-item">1.3</li>
<li class="menu-novo-item level-1-item">1.4.
<ul class="menu-novo-sumbenu level-2-submenu">
<li class="menu-novo-item level-2-item">1.4.1</li>
<li class="menu-novo-item level-2-item">1.4.2</li>
<li class="menu-novo-item level-2-item">1.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Related
Long story short I was trying to create a navigation bar but it doesn't quite seem to work as I would like it to. The problem is that if I was to add an image, for example a logo, to my ultimately astonishing navigation bar, the height and position of the anchor would slightly alter. The anchors with text only are of one size, the ones with images are a bit different. I have tried to set the height for the anchor but that doesn't seem to help.
If I have confused you too much, here is the code:
<head>
<title></title>
<style type="text/css">
body {
margin: 0 auto;
font-family: Helvetica, Arial, sans-serif;
}
#topbar-navigation {
width: 60%;
margin: 0 auto;
height: 40px;
}
#topbar-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#topbar-navigation li {
float: left;
}
#topbar-navigation li a {
display: block;
text-align: center;
padding: 14px 14px;
text-decoration: none;
margin: 10px;
background-color: #BFCDE3;
}
.topbar-border {
float: left;
border-left: 1px #CCCCCC solid;
height: auto;
margin: 0;
}
.topbar-text {
font-weight: bold;
font-size: 93%;
position: relative;
top: -2px;
}
#topbar-logo {
float: left;
height: 40px;
}
#logo {
height: 32px;
top: -7px;
position: relative;
}
#signin-img {
height: 25px;
margin-right: 10px;
margin-top: -5px;
}
#signin-span {
position: relative;
top: -7px;
margin-right: 15px;
font-weight: bold;
font-size: 93%;
}
#bell-img {
height: 25px;
top: -5px;
position: relative;
}
#more-span {
position: relative;
top: -5px;
font-weight: bold;
font-size: 93%;
height: 40px;
}
#arrow-down-img {
margin-left: 5px;
top: 10px;
position: absolute;
max-width: .9%;
opacity: .6;
}
</style>
</head>
<body>
<div id="topbar-navigation">
<ul>
<li id="topbar-logo"><img id="logo" src="img/logo.png" alt=""></img></li>
<li class="topbar-border" ><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></li>
<li class="topbar-border"><img id="bell-img" src="img/bell.png"></img></li>
<li class="topbar-border topbar-text">News</li>
<li class="topbar-border topbar-text">Sport</li>
<li class="topbar-border topbar-text">Weather</li>
<li class="topbar-border topbar-text">iPlayer</li>
<li class="topbar-border topbar-text">TV</li>
<li class="topbar-border topbar-text">Radio</li>
<li class="topbar-border"><span id="more-span">More</span><img id="arrow-down-img" src="img/arrow-down.png" alt=""></img></li>
</ul>
</div>
</body>
if you want all your items to take the same height, then get rid of floats and height in your code, and apply flex to the ul.
#topbar-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; //add this to take them in single line
flex-wrap: wrap; //add this to wrap the items to next line when space not available
}
if you need something else, feel free to comment.
body {
margin: 0 auto;
font-family: Helvetica, Arial, sans-serif;
}
#topbar-navigation {
width: 60%;
margin: 0 auto;
}
#topbar-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#topbar-navigation ul li {display: flex;}
#topbar-navigation li a {
display: block;
text-align: center;
padding: 14px 14px;
text-decoration: none;
margin: 10px;
background-color: #BFCDE3;
}
.topbar-border {
border-left: 1px #CCCCCC solid;
margin: 0;
}
.topbar-text {
font-weight: bold;
font-size: 93%;
position: relative;
}
#topbar-logo {
float: left;
}
#logo {
}
#signin-img {
}
#signin-span {
position: relative;
margin-right: 15px;
font-weight: bold;
font-size: 93%;
}
#bell-img {
position: relative;
}
#more-span {
position: relative;
font-weight: bold;
font-size: 93%;
}
#arrow-down-img {
margin-left: 5px;
top: 10px;
position: absolute;
max-width: .9%;
opacity: .6;
}
<head>
<title></title>
</head>
<body>
<div id="topbar-navigation">
<ul>
<li id="topbar-logo"><img id="logo" src="img/logo.png" alt=""></img></li>
<li class="topbar-border" ><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></li>
<li class="topbar-border"><img id="bell-img" src="img/bell.png"></img></li>
<li class="topbar-border topbar-text">News</li>
<li class="topbar-border topbar-text">Sport</li>
<li class="topbar-border topbar-text">Weather</li>
<li class="topbar-border topbar-text">iPlayer</li>
<li class="topbar-border topbar-text">TV</li>
<li class="topbar-border topbar-text">Radio</li>
<li class="topbar-border"><span id="more-span">More</span><img id="arrow-down-img" src="img/arrow-down.png" alt=""></img></li>
</ul>
</div>
</body>
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
I made a multiple levels menu by ul and li,but the second level text breaks in 2 lines like below picture :
Note : I can't use static width for second level menu (li2 class),because texts size is dynamic in this level and it can be 1 word or many words.
HTML :
<body>
<div class="top">
<ul class="ul1">
<li class="li1">home</li>
<li class="li1">accessories
<ul class="ul2">
<li class="li2">cases and protectors
<ul class="ul3">
<li class="li3">case 1</li>
<li class="li3">case 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
CSS :
body {
direction: rtl;
margin: 0;
}
.top {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 48px;
}
.ul1 {
padding: 0;
margin: 0 auto 0 auto;
display: table;
height: 48px;
list-style: none;
background-color: #bdbdbd;
}
.li1 {
padding: 0 20px 0 20px;
margin: 0;
line-height: 48px;
float: right;
border: solid 1px #FFF;
position: relative;
}
.li1:hover .ul2 {
display: block;
}
.ul2 {
padding: 0;
margin: 0;
list-style: none;
background-color: #ffd800;
display: none;
position: absolute;
top: 49px;
right: 0;
width: auto;
}
.li2 {
padding: 0;
margin: 0;
height: 48px;
width: auto;
line-height: 48px;
background-color: #808080;
display: block;
}
.ul3
{
display:none;
}
and here is a live demo,what am I doing wrong?
One quick solution is to add white-space: nowrap; to element with class .li2:
nowrap
Collapses whitespace as for normal, but suppresses line breaks
(text wrapping) within text.
body {
direction: rtl;
margin: 0;
}
.top {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 48px;
}
.ul1 {
padding: 0;
margin: 0 auto 0 auto;
display: table;
height: 48px;
list-style: none;
background-color: #bdbdbd;
}
.li1 {
padding: 0 20px 0 20px;
margin: 0;
line-height: 48px;
float: right;
border: solid 1px #FFF;
position: relative;
}
.li1:hover .ul2 {
display: block;
}
.ul2 {
padding: 0;
margin: 0;
list-style: none;
background-color: #ffd800;
display: none;
position: absolute;
top: 49px;
width: auto;
left: 0;
overflow: hidden;
}
.li2 {
padding: 0;
margin: 0;
height: 48px;
width: auto;
line-height: 48px;
background-color: #808080;
display: block;
white-space: nowrap;
}
.ul3 {
display: none;
}
<div class="top">
<ul class="ul1">
<li class="li1">home</li>
<li class="li1">accessories
<ul class="ul2">
<li class="li2">cases and protectors
<ul class="ul3">
<li class="li3">case 1
</li>
<li class="li3">case 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
You can fix the issue with the align adding left: 0 and overflow: hidden and remove right: 0
Reference
white-space
I am trying to adjust the width of the drop down menu, to match the width of the horizontal menu divider, under "Internship Program"
Any assistance would be greatly appreciated, thank you in advance.
Website is as following: http://amchaminternship.org/testimonials.html
a {
color: white;
}
.menu {
background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%;
margin: 0; padding: 0;
width: 100%;
height: 43px;
position: relative;
z-index: 1;
top: 175px;
right: 0;
}
.menu-item {
background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%;
display: block;
line-height: 40px;
float: left;
font-size: 1.083em;
padding: 0em 2em;
}
.menu-item:nth-of-type(1) {
background: none;
}
.menu-submenu {
margin: 0;
padding: 0;
position: absolute;
left: -9999em;
top: -9999em;
background-color: #123f69;
border-radius: 5px 5px 5px 5px;
border: 1px solid white;
}
.menu-item:hover > .menu-submenu {
left: auto;
top: auto;
}
.menu-submenu-item {
display: block;
}
.menu:after {
content: "";
display: table;
clear: both;
}
<ul class="menu">
<p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
<li class="menu-item">Home</li>
<li class="menu-item">Internship Program
<ul class="menu-submenu">
<li class="menu-submenu-item">FAQ</li>
<li class="menu-submenu-item">Testimonials</li>
</ul>
</li>
<li class="menu-item">Alumni</li>
<li class="menu-item">Donations</li>
<li class="menu-item"><a href="who_we_are.html">Who
We Are</a></li>
<li class="menu-item"><a href="photo_gallery.html">Photo
Gallery</a></li>
<li class="menu-item"><a href="contact_us.html">Contact
Us</a></li>
</ul>
just try it.
.menu-submenu{
min-width: 140px;
max-width: 140px;
width: auto;
margin-left: -5px;
text-indent: 5px;
}
I hope it will full fill your requirement.
Try giving width to the submenu item e.g.
.menu-submenu {
width: 140px;
}
Add this two lines in your .menu-submenu class
width: 140px;
padding-left: 10px;
Please Refer the given code :
.menu-submenu {
margin: 0;
padding: 0;
position: absolute;
left: -9999em;
top: -9999em;
background-color: #123f69;
border-radius: 5px 5px 5px 5px;
border: 1px solid white;
width: 140px;
padding-left: 10px;
}
I hope it may help you to get the idea. Now you can adjust width according your requirements
Thanks.
what you have to change is as
.menu-submenu {
margin: 0;
margin-left:-2em;
padding: 0 3em;
width:inherit;
}
by negative margin we shift the box and by inheriting width we give same width as parent
a {
color: white;
}
.menu {
background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%;
margin: 0; padding: 0;
width: 100%;
height: 43px;
position: relative;
z-index: 1;
top: 175px;
right: 0;
}
.menu-item {
background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%;
display: block;
line-height: 40px;
float: left;
font-size: 1.083em;
padding: 0em 2em;
}
.menu-item:nth-of-type(1) {
background: none;
}
.menu-submenu {
margin: 0;
margin-left:-2em;
padding: 0 3em;
width:inherit;
position: absolute;
left: -9999em;
top: -9999em;
background-color: #123f69;
border-radius: 5px 5px 5px 5px;
border: 1px solid white;
}
.menu-item:hover > .menu-submenu {
left: auto;
top: auto;
}
.menu-submenu-item {
display: block;
}
.menu:after {
content: "";
display: table;
clear: both;
}
<ul class="menu">
<p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
<li class="menu-item">Home</li>
<li class="menu-item">Internship Program
<ul class="menu-submenu">
<li class="menu-submenu-item">FAQ</li>
<li class="menu-submenu-item">Testimonials</li>
</ul>
</li>
<li class="menu-item">Alumni</li>
<li class="menu-item">Donations</li>
<li class="menu-item"><a href="who_we_are.html">Who
We Are</a></li>
<li class="menu-item"><a href="photo_gallery.html">Photo
Gallery</a></li>
<li class="menu-item"><a href="contact_us.html">Contact
Us</a></li>
</ul>
Add below code.
.menu-submenu{
width:120px !important;
padding-left:10px;
}
How can menu_sub_a inherit menu_li width and height without javascript? I tried to use inheriton menu_sub_a class but that didn't work.
HTML:
<li class="menu_li"><a class="menu_drop_a" href="">Gold</a>
<ul class="menu_sub_ul">
<li><a class="menu_sub_a" href="">First</a></li>
<li><a class="menu_sub_a" href="">Second</a></li>
<li><a class="menu_sub_a" href="">Third</a></li>
</ul>
</li>
CSS:
li.menu_li {
display: inline;
float: right;
width: auto;
height: auto;
}
a.menu_a, a.menu_drop_a {
display: block;
width: auto;
height: auto;
text-decoration: none;
font-family: Century Gothic,sans-serif;
font-size: 22px;
color: #787878;
background-color: #3A3A3A;
padding: 0.7em 0.95em;
border-right: 1px solid #323232;
}
ul.menu_sub_ul {
list-style-type: none;
position: absolute;
top: 58px;
}
a.menu_sub_a {
width: 100%;
height: 100%;
display: none;
line-height: 50px;
text-align: center;
text-decoration: none;
font-family: Century Gothic,sans-serif;
font-size: 22px;
color: #787878;
background-color: #323232;
border-top: 1px solid #787878;
}
.menu_li should be positioned relatively, and .menu_sub_ul should have width: 100%:
ul.menu_sub_ul {
list-style-type: none;
position: absolute;
top: 58px;
left: 0;
width: 100%;
}
Demo: http://jsfiddle.net/4jW73/
Since menu_sub_a is inside menu_li you can just add width:100% and height 100% to menu_sub_a, because this is percentage of the containing div.