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
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>
So I want to create a bar like that. I found a code about it and I modified it a little bit, originally it was a timeline. So my problem is that I can't align the bullets to middle in the li tag. How could I achive that?
ul.language-bar {
max-width: 29em;
width: 100%;
padding: 0 18px;
height: 2em;
margin: 0;
padding: 0;
font-size: 10px;
/* change font size only to scale*/
}
ul.language-bar li {
width: 15%;
float: left;
height: 100%;
list-style: none;
position: relative;
margin: 0;
}
ul.language-bar li.empty:before {
background: #fff;
border: 0.3em solid #f98d9c;
box-sizing: border-box;
}
ul.language-bar li:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background: #f98d9c;
width: 2em;
height: 2em;
border-radius: 2em;
z-index: 2;
}
.language-container .language-bar {
justify-content: center;
display: flex;
}
<div class="language-container">
<ul class="language-bar">
<li></li>
<li></li>
<li></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
</div>
You need to add these three lines to your ul.language-bar li:before class
position: absolute;
left: 50%;
margin-left: -1em;
This will
unbind bullets to make it possible to position them directly
move every bullet to the center of its parent li (since it is the first parent element having positions:relative)
shift every bullet 1em (half of bullet's width) to the left to make it perfectly centred.
ul.language-bar {
max-width: 29em;
width: 100%;
padding: 0 18px;
height: 2em;
margin: 0;
padding: 0;
font-size: 10px;
/* change font size only to scale*/
}
ul.language-bar li {
width: 15%;
float: left;
height: 100%;
list-style: none;
position: relative;
margin: 0;
}
ul.language-bar li.empty:before {
background: #fff;
border: 0.3em solid #f98d9c;
box-sizing: border-box;
}
ul.language-bar li:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background: #f98d9c;
width: 2em;
height: 2em;
border-radius: 2em;
z-index: 2;
position: absolute;
left: 50%;
margin-left: -1em;
}
.language-container .language-bar {
justify-content: center;
display: flex;
}
<div class="language-container">
<ul class="language-bar">
<li></li>
<li></li>
<li></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
</div>
By not trying to center an absolutely positioned pseudo element, like you're currently doing.
You will have to nest a block element inside of the li element and center that.
Like so:
ul.language-bar {
max-width: 29em;
width: 100%;
padding: 0 18px;
height: 2em;
margin: 0;
padding: 0;
font-size: 10px;
/* change font size only to scale*/
}
ul.language-bar li {
width: 15%;
float: left;
height: 100%;
list-style: none;
position: relative;
margin: 0;
}
ul.language-bar li.empty span {
content: '';
display: block;
position: relative;
margin: 0 auto;
background: #fff;
border: 0.3em solid #f98d9c;
box-sizing: border-box;
width: 2em;
height: 2em;
border-radius: 2em;
z-index: 2;
}
ul.language-bar li span {
content: '';
display: block;
position: relative;
margin: 0 auto;
background: #f98d9c;
width: 2em;
height: 2em;
border-radius: 2em;
z-index: 2;
}
.language-container .language-bar {
justify-content: center;
display: flex;
}
<div class="language-container">
<ul class="language-bar">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li class="empty"><span></span></li>
<li class="empty"><span></span></li>
</ul>
</div>
This is obviously quick and dirty to illustrate the point and would need to be optimized.
Another possibility would be to use Flexbox for the layout. Still, it needs a separate element inside of the li elements to work.
With some changes for a shorter CSS...
:root {
--scale: 20px;
}
.language-container {
display: table;
margin: 0 auto;
}
.language-container ul {
list-style : none;
font-size : var(--scale);
}
.language-container ul li {
display: inline-block;
position: relative;
background: #f98d9b;
width: 2em;
height: 2em;
border-radius: 2em;
}
.language-container ul li.empty:after {
position: absolute;
left: 0.3em;
top: 0.3em;
content: '';
display: block;
width: 1.4em;
height: 1.4em;
border-radius: 1.4em;
box-sizing: border-box;
background: #fff;
}
<div class="language-container">
<ul>
<li></li>
<li></li>
<li></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
</div>
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>
I have OCD and the following needs to be fixed (the spacing of word's in my navigation bar).
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 20%;
max-width: 80px;
display: block;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 90%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 5%;
left: 5%;
}
<div class="navContainer">
<nav>
<ul>
<li> art
</li>
<li> download
</li>
<li>
<a href="home.html">
<img src="image/symbol.png">
</a>
</li>
<li> portfolio
</li>
<li> product
</li>
</ul>
</nav>
</div>
All I need is the words to be evenly spread out with the image still intact in the middle like the picture dictates.
Notice how the word art is unevenly spread compared to the right side?
I am the first one to say that I am building my own website and I am new to CSS/HTML scripting.
Appreciate the help,
Thanks.
Use display: table / table-cell for the list / list items.
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
list-style: none;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul:before {
display: table;
content: " ";
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
float: none;
width: 1%;
max-width: 80px;
display: table-cell;
position: relative;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 90%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 5%;
left: 5%;
}
Removing the float: left and the display: block from the nav ul li CSS selector and then adding
display: flex;
flex-flow: row wrap;
justify-content: space-between;
to the nav ul CSS selector will change the display from block to flexible boxes, allowing for the text to be more evenly spread out throughout the entire element
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
// float: left;
width: 20%;
max-width: 80px;
// display: block;
flex: 1;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 90%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 5%;
left: 5%;
}
<body>
<div class="navContainer">
<nav>
<ul>
<li> art
</li>
<li> download
</li>
<li>
<a href="home.html">
<img src="image/symbol.png">
</a>
</li>
<li> portfolio
</li>
<li> product
</li>
</ul>
</nav>
</div>
</body>
EDIT:
I added a few characters around the word art in the link to give it some spacing to resemble the other links.
is how you create whitespace in HTML
Something like this (with slightly changed markup)?
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
display: flex;
height: 30px;
}
nav ul {
display: flex;
height: 30px;
margin: 0;
padding: 0;
}
nav ul:nth-child(1), nav ul:nth-child(3) {
flex: 1;
justify-content: space-between;
}
nav ul:nth-child(1)::before, nav ul:nth-child(3)::before,
nav ul:nth-child(1)::after, nav ul:nth-child(3)::after{
content: '';
}
nav ul:nth-child(2) {
width: 18%;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
max-width: 80px;
display: block;
}
nav ul:nth-child(2) li {
width: 100%;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
left: 0%;
}
<div class="navContainer">
<nav>
<ul>
<li> art </li>
<li> download </li>
</ul>
<ul>
<li><img src="http://www.pd4pic.com/images/eye-black-fan-symbol-design-sun-flower-circle.png"></li>
</ul>
<ul>
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
</div>
Try this, just change the nav percentage as per your requirement. Also for more accurate results you can add media query.
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
list-style: none;
max-width: 75%;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul:before {
display: table;
content: " ";
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
float: none;
width: 1%;
max-width: 80px;
display: table-cell;
position: relative;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 0;
left: 0;
}
<body>
<div class="navContainer">
<nav>
<ul>
<li> art
</li>
<li> download
</li>
<li>
<a href="home.html">
<img src="image/symbol.png">
</a>
</li>
<li> portfolio
</li>
<li> product
</li>
</ul>
</nav>
</div>
</body>
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;
}