I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
How can I solve this?
Here is the code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
<ul class="level_1">
<li>
Level one (1)
<ul class="level_2">
<li>Level two (1)</li>
</ul>
</li>
<li>Level one (2)</li>
</ul>
<p>Paragraph</p>
See the result here: http://jsfiddle.net/5uf2Y/
Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
You have forgotten two elements for display 100%.
Correction here
1st elements forgets it's :
Position relative on level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :
change size of 2nd li
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2 it automatically turns out with the width of its parent.
Add position:relative to level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
Related
I'm trying to center <li> items in the page and next to each other without any luck!
I have tried all sorts of ways from display:table; to magin:0 auto; and display:block; and display:inline-block; etc etc... and unfortunately nothing seems to work.
To explain this I've created this JSFIDDLE
Please expand the HTML section of that fiddle to see the menu items in the normal mode (green bar).
the CSS Code that I have been messing around with is this part:
nav {
/*position: absolute;
top: 0;
right: 5px;*/
}
nav li {
float: left;
display: inline-block;
}
nav li a {
font-size: 11px;
color: #9aa6af;
padding: 24px 15px;
display: block;
}
nav li a:hover {color: #000;}
could someone please advise on this issue?
any help would be appreciated.
Thanks in advance.
basicly you can do :
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
Float kills display and cannot be centered
You have to manipulate the <ul> parent, for example in your jsfiddle setting display: table; margin: 0 auto; to the nav will center the nav menu
Try this technique:
/* center nav */
nav > ul { /* center ul */
float: left;
position: relative;
left: 50%;
}
nav > ul > li { /* compensate ul position */
float: left;
display: block;
position: relative;
right: 50%;
}
nav > ul > li > a {
display: block;
}
I've updated your fiddle https://jsfiddle.net/tianes/h1m9aog6/4/
on ul apply this
ul
{
display: table;
margin: 0 auto
}
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
I'm making a dropdown menu but for some reason the dropdown's width doesn't work.
I tried making a fiddle but I couldn't get it to work with the angular part.
I'm using angular so this is my HTML:
<ul id="main-menu">
<li data-ng-repeat="item in mainMenu" data-ng-switch on="item">{{item}}
<ul data-ng-switch-when="Mina sidor">
<li data-ng-repeat="subitem in subMenu.myPages">{{subitem}}</li>
</ul>
</li>
</ul>
CSS (I'm using SASS so it's a bit awkwardly formatted, I apologize for that) :
body, #main-menu, #main-menu li ul {
margin: 0;
padding: 0; }
body {
width: 100%; }
#main-menu {
list-style: none; }
#main-menu li:nth-child(even) {
background: red; }
#main-menu li {
width: 12.5%;
display: inline-block;
text-align: center; }
#main-menu li ul {
display: none;
width: inherit; }
#main-menu li ul li {
height: 30px;
line-height: 30px;
width: inherit;
height: 30px;
background: pink;
display: block;
text-align: left;
margin: 0; }
#main-menu li:nth-child(4) {
position: relative; }
#main-menu li:nth-child(4):hover ul {
position: absolute;
display: block;
background: yellow; }
Here's what the problem looks like:
The ul dropdown and it's li:s width doesn't work for some reason, even though the box model in the console says that their width is in fact 12.5%. Why aren't they stretching to this width?
Edit: I had set the dropdown ul's width to 12.5% instead of 100%, it works perfect now.
I have the following simple piece of code:
<li>
<div class="stripe"></div>
linktext
</li>
my goal is to have the div on the right side of the li, filling its height while having a fixed width, say 10px. I tried this css, but it is not working:
li {
display: block;
}
.stripe {
float: right;
width: 10px;
height: 100%;
}
Something that does work would be:
li {
position: relative;
}
.stripe {
position: absolute;
height: 100%;
width: 10px;
right: 0;
}
However, I don't want to use css position attributes here. I thought it should be possibly by using a special type of display-property somewhere, but I haven't figured out where. I also read that height: 100%;needs a parent height to work. Indeed it does, setting the li-height to a px-value makes the div.stripe have that height, but my li should be variable in height. Is there any simple way to make this work?
Here's a solution that uses the latest flexbox specification and requires a modern browser: http://jsfiddle.net/a956kdfL/.
HTML:
<ul>
<li>
<div></div>
linktext
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
padding: 10px;
}
ul > li {
display: flex;
flex-flow: row wrap;
}
ul > li > div {
flex: 0 0 10px;
outline: 1px solid red;
}
Here's a simpler solution that uses tables: http://jsfiddle.net/g7pxLcge/ and should work in older browsers.
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
padding: 10px;
}
ul > li {
display: table;
}
ul > li > div {
display: table-cell;
width: 10px;
outline: 1px solid red;
}
ul > li > a {
display: table-cell;
}
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }