I am facing a problem with CSS menu. I want the parent li not to be disturbed by the sub menu. I want the parent list to have widths equal to the text contents they have itself but not the inner ul. I don't want to give the parent list specific width. Here is the image.
CSS
ul {
list-style: none;
}
.nav{
padding-left: 70px;
line-height: 60px;
overflow: hidden;
}
.nav > li{
float: left;
font-size: 20px;
margin-right: 18px;
cursor: pointer;
background: yellow;
}
.subm{
overflow: hidden;
width: 200px;
list-style: none;
line-height: normal;
outline: 1px solid black;
padding: 0;
background: #252525;
padding: 0 10px 10px 10px;
}
.subm > li{
color: #ffde00;
margin: 0;
margin-top: 4px;
padding-left: 6px;
font-family: decker;
}
HTML
<ul class="nav">
<li>Home</li>
<li>Languages
<ul class="subm">
<li>C</li>
<li>C++</li>
<li>java</li>
<li>c#</li>
</ul>
</li>
<li>About</li>
</ul>
Add position:absolute to .subm
Fiddle: http://jsfiddle.net/eryo2kjg/
I checked in your jsfiddle #Hanzallah Afgan. Try this
Remove overflow:hidden css property for .nav, then the sub menu will display
Related
I have a navigation menu link that has extra whitespace at the bottom of the div tag with the id of nav. It is not because margin or padding, but there is some sort of whitespace that is not allowing the ul tag to touch the bottom of the div with the id of nav. How do I get it to do so. Here is the link
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
The gap is reserved space given to descender text elements (e.g. j, y, g). Remove it by adding vertical-align:top to your <ul>
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
vertical-align: top;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
Note that the list items poke out below the div because of the padding you applied to #nav a which can be adjusted.
To fix your problem do this:
Change #nav ul to this:
#nav ul {
padding: 10px 0;
}
Change #nav li to this:
#nav li {
display: inline-block;
list-style: none;
margin-left: 50px;
}
remove margin-left: 50px; from your #nav li.Its creating unwanted white space on your menu.The width of menu will depend on the lenth of text
Something to do with the inline-block it seems. There's no space with inline-flex or display: table;
#nav ul {
padding: 10px 0;
display: inline-flex;
background-color: black;
}
inline-block's biggest problem was it's handling of fonts, it adds a ghost 'padding' of 4 to 5px after each element, depending on browser.
Here's a rewrite that uses the font-size: 0 method to negate the effects.
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
border: 1px solid black;
min-width: 300px;
}
#nav ul {
list-style-type: none;
font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
display: inline-block;
width: 25%; /* control width here */
text-align: center;
}
#nav a {
display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
text-decoration: none;
color: black;
font-size: 15px; /* reset font-size here */
line-height: 30px; /* control element height here */
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
fiddle
https://jsfiddle.net/Hastig/wfrxgxjm/
<ul class="nav">
<li><i class="icon-home"></i></li>
<li>Blog</li>
<li>Elements</li>
<li>Contact us</li>
</ul>
.nav {
line-height: 70px;
margin: 0;
padding: 0;
border: 0;
}
.nav li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
display: inline;
float: left;
padding-left: 4px;
padding-right: 4px;
}
.active {
background: pink;
}
.icon-home {
background: url(http://i.stack.imgur.com/MNme0.png) no-repeat;
width: 16px;
height: 14px;
display:block;
}
body {
background: gray;
}
How do I make the background of .active take up the whole height of li and center the icon? If you check the demo it doesn't respect the line-height of the li.
Demo: http://codepen.io/anon/pen/ulEGw
You could set .icon-home to display: inline-block;, which will center it vertically with the rest of the text.
You can also keep your line-height this way.
Assuming you want to keep your line-height: 70px on .nav, put height: 70px; on .icon-home.
I am trying to build a Nav that has a :hover effect. When I hover, the hover effect will not expand to fill the entire background of the nav. I have tried manipulating it with margin and padding, but to no avail.
Here is the CSS:
div#nav {
background-image: url("images/navback.png");
background-repeat: no-repeat;
width: 580px;
height: 85px;
margin-left: 100px;
}
ul#navlist {
padding-top: 10px;
padding-left: 25px;
font-size: 15px;
font-family: 'OpenSansCondensedBold', sans-serif;
font-weight: bold;
line-height: 40px;
}
ul#navlist li{
display: inline;
list-style-type: none;
margin: 18px;
line-height: 40px;
}
ul#navlist li:hover {
box-shadow:inset 0 0 10px #ffffff;
cursor: pointer;
}
a:link {
text-decoration: none;
color: #717171;
}
I'm a little stumped, any help is appreciated!
Here is the Markup:
<div id="nav">
<ul id="navlist">
<li>Home</li>
<li>Buy Art</li>
<li>Make Money</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
to style an element to full height of the parent-element you simply add:
height: 100%;
I'm not sure, but it might be you also have to add to that selector
display: inline-block;
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.
Using CSS Style Sheet
In my web page, i have two class like menu and leftside. In menu i have the ul, li classes. i want to use a ul, li in left side also, but the problem is if i used the ul, li, it was matching with menu ul, li
ul -underlist, li - list
I tried to change the code of sheet,
my css code.
#leftside{
float: left;
width: 230px;
margin-left: 5px;
margin-top: 15px;
overflow: hidden;
font: 13px Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: maroon;
}
ul {
padding: 10px 10px 2px 0;
margin: 0px;
list-style: none;
}
li li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
Html Code
<li>
<ul>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
ul, list are matching with the menu ul, li
How to solve this issue. Please.
To reduse the amount of space above the inner list change the padding for the ul so that it is 0 or negative.
For Example:
ul {
padding: 0 10px 2px 0;
margin: 0px;
list-style: none;
}
You can also use a special style sheet to correct the problem in Internet Explorer by doing something like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
You would then need a second CSS file named iespecific.css which has the above ul styling in it.
Use an id to distinguish between the two.
For example the HTML would be:
<ul id="outter">
<li>The Outter List</li>
<li>More Outter List
<ul id="inner">
<li>This is the inner list</li>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
<li>Still The Outter</li>
</ul>
In the CSS you would have something like this:
#outter ul {
padding: 10px 10px 2px 0;
list-style: none;
}
#outter li {
margin-left: 10px;
line-height: 30px;
padding-left: 15px;
}
#inner ul {
padding: 10px 10px 2px 15px;
list-style: none;
}
#inner li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
This looks something like this:
alt text http://img16.imageshack.us/img16/2376/examplesg.png